rust/forkmessager
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects 3 Releases Wiki Activity
Files
90096ce2bc912dccf0ae60341cbfdc135a2bd6af
forkmessager/stitch/_5/code.html
Халимов Рустам aa69c44a64 Новый стиль
2026-03-31 21:11:05 +03:00

466 lines
25 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html class="dark" lang="ru"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Knot Admin Panel - Статистика</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"on-primary": "#003355",
"surface-variant": "#353534",
"surface-tint": "#9acbff",
"secondary-fixed-dim": "#c7c6ca",
"on-secondary": "#2f3033",
"surface-bright": "#393939",
"background": "#131313",
"secondary-container": "#48494c",
"primary": "#9acbff",
"on-secondary-fixed-variant": "#46474a",
"secondary-fixed": "#e3e2e6",
"on-surface-variant": "#c1c6d7",
"on-primary-container": "#002c4a",
"on-primary-fixed": "#001d34",
"inverse-surface": "#e5e2e1",
"surface-dim": "#131313",
"on-background": "#e5e2e1",
"inverse-on-surface": "#313030",
"outline-variant": "#414755",
"surface-container-highest": "#353534",
"on-tertiary": "#003911",
"tertiary": "#53e16f",
"secondary": "#c7c6ca",
"primary-fixed": "#cfe5ff",
"primary-fixed-dim": "#9acbff",
"on-primary-fixed-variant": "#004a79",
"surface-container-low": "#1c1b1b",
"on-surface": "#e5e2e1",
"on-secondary-container": "#b9b8bc",
"primary-container": "#3096e5",
"surface-container": "#201f1f",
"tertiary-container": "#00a741",
"tertiary-fixed-dim": "#53e16f",
"on-secondary-fixed": "#1a1b1e",
"error-container": "#93000a",
"surface": "#131313",
"on-tertiary-container": "#00320e",
"on-error-container": "#ffdad6",
"on-error": "#690005",
"on-tertiary-fixed": "#002107",
"inverse-primary": "#00629e",
"tertiary-fixed": "#72fe88",
"on-tertiary-fixed-variant": "#00531c",
"error": "#ffb4ab",
"outline": "#8b90a0",
"surface-container-lowest": "#0e0e0e",
"surface-container-high": "#2a2a2a"
},
fontFamily: {
"headline": ["Inter"],
"body": ["Inter"],
"label": ["Inter"]
},
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
},
},
}
</script>
<style>
body { font-family: 'Inter', sans-serif; background-color: #131313; color: #e5e2e1; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.glass-card { background: rgba(32, 31, 31, 0.6); backdrop-filter: blur(12px); }
.no-scrollbar::-webkit-scrollbar { display: none; }
</style>
</head>
<body class="antialiased selection:bg-primary/30">
<!-- SideNavBar (Shared Component) -->
<aside class="h-screen w-64 fixed left-0 top-0 flex flex-col bg-[#131313] dark:bg-[#131313] shadow-2xl shadow-black/50 z-50">
<div class="flex flex-col h-full py-6 px-4">
<!-- Header Section -->
<div class="flex items-center gap-3 mb-8 px-2">
<div class="w-10 h-10 rounded-full bg-primary-container flex items-center justify-center overflow-hidden">
<img alt="Администратор" data-alt="Close up of a professional futuristic digital avatar profile picture with neon blue highlights and dark background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBlXqRIuWbYVUsvDBny3t4xpE51L2IA3ab6RUk2So4URi5UwU3gS_AgXSfEtoaGTnBnJZPC5psA4b44OkTfQckuorvbjnlUGxqJBJwSKkhAk0tX85nS9wL4iL7DhZTzpKHPvieKpFmJv89ZE2d-aL8OcGG7xBxZBX19Sy0rsYWTWDco6hoeegGQkQr7_i0jubpGqMpJlE4gfBwpzHmp1gDnfcc1ZuktZH5EM5BiExGri7Qc5AFu1EGBYIP-iGM_qJoUl3ysXgaPYx8"/>
</div>
<div>
<h1 class="text-lg font-bold tracking-tighter text-[#9ACBFF]">Knot Admin</h1>
<p class="text-[10px] uppercase tracking-widest text-white/40">Управление узлом</p>
</div>
</div>
<!-- Navigation Tabs -->
<nav class="flex-1 space-y-1">
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-white/60 hover:text-white hover:bg-white/5 transition-colors transform active:scale-95 transition-transform" href="#">
<span class="material-symbols-outlined text-xl" data-icon="group">group</span>
<span class="font-medium text-sm">Пользователи</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-white/60 hover:text-white hover:bg-white/5 transition-colors transform active:scale-95 transition-transform" href="#">
<span class="material-symbols-outlined text-xl" data-icon="chat_bubble">chat_bubble</span>
<span class="font-medium text-sm">Группы</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-white/60 hover:text-white hover:bg-white/5 transition-colors transform active:scale-95 transition-transform" href="#">
<span class="material-symbols-outlined text-xl" data-icon="hub">hub</span>
<span class="font-medium text-sm">Федерация</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-white/60 hover:text-white hover:bg-white/5 transition-colors transform active:scale-95 transition-transform" href="#">
<span class="material-symbols-outlined text-xl" data-icon="dns">dns</span>
<span class="font-medium text-sm">Серверы</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-white/60 hover:text-white hover:bg-white/5 transition-colors transform active:scale-95 transition-transform" href="#">
<span class="material-symbols-outlined text-xl" data-icon="settings">settings</span>
<span class="font-medium text-sm">Настройки</span>
</a>
<!-- Active Tab: Статистика -->
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-[#9ACBFF] font-bold border-r-2 border-[#9ACBFF] bg-gradient-to-r from-[#3096E5]/10 to-transparent transform active:scale-95 transition-transform" href="#">
<span class="material-symbols-outlined text-xl" data-icon="analytics" style="font-variation-settings: 'FILL' 1;">analytics</span>
<span class="font-medium text-sm">Статистика</span>
</a>
</nav>
<!-- Footer Section -->
<div class="mt-auto pt-6 border-t border-white/5">
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-white/60 hover:text-error transition-colors" href="#">
<span class="material-symbols-outlined text-xl" data-icon="logout">logout</span>
<span class="font-medium text-sm">Выход</span>
</a>
</div>
</div>
</aside>
<!-- Main Canvas -->
<main class="ml-64 min-h-screen bg-surface flex flex-col">
<!-- TopAppBar (Shared Component) -->
<header class="sticky top-0 w-full z-40 bg-[#131313]/60 backdrop-blur-xl flex justify-between items-center h-16 px-8">
<div class="flex items-center gap-4">
<h2 class="text-[#9ACBFF] font-['Inter'] text-lg font-semibold">Панель администратора</h2>
</div>
<div class="flex items-center gap-6">
<!-- Search -->
<div class="relative group hidden md:block">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-white/40 group-focus-within:text-primary transition-colors" data-icon="search">search</span>
<input class="bg-surface-container border-none rounded-full py-1.5 pl-10 pr-4 text-sm w-64 focus:ring-1 focus:ring-primary/50 transition-all outline-none" placeholder="Поиск по системе..." type="text"/>
</div>
<!-- Actions -->
<div class="flex items-center gap-2">
<button class="hover:bg-white/10 rounded-full p-2 transition-opacity hover:opacity-80">
<span class="material-symbols-outlined text-white/70" data-icon="notifications">notifications</span>
</button>
<button class="hover:bg-white/10 rounded-full p-2 transition-opacity hover:opacity-80">
<span class="material-symbols-outlined text-white/70" data-icon="dark_mode">dark_mode</span>
</button>
<div class="w-8 h-8 rounded-full bg-surface-container-highest overflow-hidden border border-white/10 ml-2">
<img alt="Профиль админа" data-alt="Portrait of a modern software engineer in a dark studio, minimalist aesthetic, low key lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCQFskpv3vWWtWgQ0DuyTtExLXj-Jt_ihnMDS_vBTb0yQP4MFdktX9T4tCQBhADSrhfKJ1leSKVTmNyoa5CbC94Q-YZRECE9rr6SzSM-gnTLOJX8m1UW5XovVaCze9-t_LvuqgCbPddKIcvqfAuskzD5Hydc4RQpQz-P7ZB9sGDvoTgkRfzpsZRGH3djJKEFpoFfhQDZm4hwgJjX9jtC8QC0OSCLxzQnvELD4Ii8nafdHgeslMnROcTFyK5EJXZP1jn77RyxN531XE"/>
</div>
</div>
</div>
</header>
<!-- Content Area -->
<div class="p-8 space-y-8 max-w-7xl mx-auto w-full">
<!-- Metric Cards: Bento Grid Style -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Users Metric -->
<div class="glass-card p-6 rounded-xl border border-white/5 hover:border-primary/20 transition-all group">
<div class="flex justify-between items-start mb-4">
<div class="p-2 bg-primary/10 rounded-lg text-primary">
<span class="material-symbols-outlined" data-icon="group">group</span>
</div>
<span class="text-tertiary text-xs font-bold flex items-center gap-1">
<span class="material-symbols-outlined text-[14px]" data-icon="trending_up">trending_up</span> +12%
</span>
</div>
<div class="space-y-1">
<p class="text-white/40 text-xs font-medium uppercase tracking-wider">Пользователи</p>
<h3 class="text-3xl font-bold text-white tracking-tight">12,482</h3>
<p class="text-primary text-sm font-medium">842 онлайн сейчас</p>
</div>
</div>
<!-- Groups Metric -->
<div class="glass-card p-6 rounded-xl border border-white/5 hover:border-primary/20 transition-all group">
<div class="flex justify-between items-start mb-4">
<div class="p-2 bg-secondary-container/30 rounded-lg text-secondary">
<span class="material-symbols-outlined" data-icon="chat_bubble">chat_bubble</span>
</div>
</div>
<div class="space-y-1">
<p class="text-white/40 text-xs font-medium uppercase tracking-wider">Группы</p>
<h3 class="text-3xl font-bold text-white tracking-tight">3,105</h3>
<p class="text-white/60 text-sm font-medium">156 создано сегодня</p>
</div>
</div>
<!-- Federation Metric -->
<div class="glass-card p-6 rounded-xl border border-white/5 hover:border-primary/20 transition-all group">
<div class="flex justify-between items-start mb-4">
<div class="p-2 bg-tertiary/10 rounded-lg text-tertiary">
<span class="material-symbols-outlined" data-icon="hub">hub</span>
</div>
<span class="bg-tertiary/20 text-tertiary px-2 py-0.5 rounded-full text-[10px] font-bold">ACTIVE</span>
</div>
<div class="space-y-1">
<p class="text-white/40 text-xs font-medium uppercase tracking-wider">Фед. узлы</p>
<h3 class="text-3xl font-bold text-white tracking-tight">84</h3>
<p class="text-white/60 text-sm font-medium">Синхронизировано 100%</p>
</div>
</div>
<!-- Server Load Metric -->
<div class="glass-card p-6 rounded-xl border border-white/5 hover:border-primary/20 transition-all group">
<div class="flex justify-between items-start mb-4">
<div class="p-2 bg-error/10 rounded-lg text-error">
<span class="material-symbols-outlined" data-icon="memory">memory</span>
</div>
</div>
<div class="space-y-4">
<div class="space-y-1">
<div class="flex justify-between text-[10px] font-bold text-white/40 uppercase">
<span>CPU Load</span>
<span class="text-white">42%</span>
</div>
<div class="h-1.5 w-full bg-surface-container rounded-full overflow-hidden">
<div class="h-full bg-primary rounded-full w-[42%]"></div>
</div>
</div>
<div class="space-y-1">
<div class="flex justify-between text-[10px] font-bold text-white/40 uppercase">
<span>RAM Usage</span>
<span class="text-white">68%</span>
</div>
<div class="h-1.5 w-full bg-surface-container rounded-full overflow-hidden">
<div class="h-full bg-tertiary rounded-full w-[68%]"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Activity Chart (Placeholder) & Recent Activity -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Main Activity Chart -->
<div class="lg:col-span-2 glass-card rounded-2xl p-8 border border-white/5">
<div class="flex items-center justify-between mb-8">
<div>
<h4 class="text-xl font-bold text-white">Активность системы</h4>
<p class="text-white/40 text-sm">Трафик и сообщения за последние 24 часа</p>
</div>
<div class="flex bg-surface-container p-1 rounded-lg">
<button class="px-3 py-1 text-xs font-bold bg-surface-container-highest rounded text-white shadow-sm">24ч</button>
<button class="px-3 py-1 text-xs font-bold text-white/40 hover:text-white transition-colors">7д</button>
<button class="px-3 py-1 text-xs font-bold text-white/40 hover:text-white transition-colors">30д</button>
</div>
</div>
<!-- SVG Chart Visualization -->
<div class="relative h-64 w-full flex items-end justify-between gap-1 overflow-hidden">
<div class="absolute inset-0 flex flex-col justify-between pointer-events-none">
<div class="border-b border-white/5 w-full h-0"></div>
<div class="border-b border-white/5 w-full h-0"></div>
<div class="border-b border-white/5 w-full h-0"></div>
<div class="border-b border-white/5 w-full h-0"></div>
<div class="border-b border-white/5 w-full h-0"></div>
</div>
<!-- Mock bars -->
<div class="bg-primary/20 hover:bg-primary/40 transition-colors w-full rounded-t-sm" style="height: 40%"></div>
<div class="bg-primary/20 hover:bg-primary/40 transition-colors w-full rounded-t-sm" style="height: 55%"></div>
<div class="bg-primary/20 hover:bg-primary/40 transition-colors w-full rounded-t-sm" style="height: 35%"></div>
<div class="bg-primary/20 hover:bg-primary/40 transition-colors w-full rounded-t-sm" style="height: 60%"></div>
<div class="bg-primary/20 hover:bg-primary/40 transition-colors w-full rounded-t-sm" style="height: 80%"></div>
<div class="bg-primary/20 hover:bg-primary/40 transition-colors w-full rounded-t-sm" style="height: 95%"></div>
<div class="bg-primary/20 hover:bg-primary/40 transition-colors w-full rounded-t-sm" style="height: 70%"></div>
<div class="bg-primary/20 hover:bg-primary/40 transition-colors w-full rounded-t-sm" style="height: 45%"></div>
<div class="bg-primary/20 hover:bg-primary/40 transition-colors w-full rounded-t-sm" style="height: 50%"></div>
<div class="bg-primary/20 hover:bg-primary/40 transition-colors w-full rounded-t-sm" style="height: 65%"></div>
<div class="bg-primary-container hover:bg-primary transition-colors w-full rounded-t-sm" style="height: 85%"></div>
<div class="bg-primary-container hover:bg-primary transition-colors w-full rounded-t-sm" style="height: 90%"></div>
<div class="bg-primary/20 hover:bg-primary/40 transition-colors w-full rounded-t-sm" style="height: 60%"></div>
<div class="bg-primary/20 hover:bg-primary/40 transition-colors w-full rounded-t-sm" style="height: 40%"></div>
<div class="bg-primary/20 hover:bg-primary/40 transition-colors w-full rounded-t-sm" style="height: 30%"></div>
<div class="bg-primary/20 hover:bg-primary/40 transition-colors w-full rounded-t-sm" style="height: 50%"></div>
<div class="bg-primary/20 hover:bg-primary/40 transition-colors w-full rounded-t-sm" style="height: 75%"></div>
<div class="bg-primary/20 hover:bg-primary/40 transition-colors w-full rounded-t-sm" style="height: 60%"></div>
<div class="bg-primary/20 hover:bg-primary/40 transition-colors w-full rounded-t-sm" style="height: 45%"></div>
<div class="bg-primary/20 hover:bg-primary/40 transition-colors w-full rounded-t-sm" style="height: 40%"></div>
</div>
<div class="mt-4 flex justify-between text-[10px] text-white/30 font-bold uppercase tracking-widest">
<span>00:00</span>
<span>06:00</span>
<span>12:00</span>
<span>18:00</span>
<span>Текущее</span>
</div>
</div>
<!-- Activity Feed -->
<div class="glass-card rounded-2xl border border-white/5 flex flex-col">
<div class="p-6 border-b border-white/5">
<h4 class="text-lg font-bold text-white">Узлы федерации</h4>
<p class="text-white/40 text-xs">Статус подключенных инстансов</p>
</div>
<div class="flex-1 overflow-y-auto no-scrollbar p-2 space-y-1">
<div class="flex items-center gap-3 p-3 rounded-xl hover:bg-white/5 transition-colors group">
<div class="w-10 h-10 rounded-lg bg-surface-container flex items-center justify-center text-primary">
<span class="material-symbols-outlined text-lg" data-icon="dns">dns</span>
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-semibold text-white truncate">Main-Frankfurt-01</p>
<p class="text-xs text-white/40">latency: 24ms</p>
</div>
<div class="w-2 h-2 rounded-full bg-tertiary"></div>
</div>
<div class="flex items-center gap-3 p-3 rounded-xl hover:bg-white/5 transition-colors group">
<div class="w-10 h-10 rounded-lg bg-surface-container flex items-center justify-center text-primary">
<span class="material-symbols-outlined text-lg" data-icon="dns">dns</span>
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-semibold text-white truncate">Relay-Moscow-Node</p>
<p class="text-xs text-white/40">latency: 12ms</p>
</div>
<div class="w-2 h-2 rounded-full bg-tertiary"></div>
</div>
<div class="flex items-center gap-3 p-3 rounded-xl hover:bg-white/5 transition-colors group">
<div class="w-10 h-10 rounded-lg bg-surface-container flex items-center justify-center text-primary">
<span class="material-symbols-outlined text-lg" data-icon="dns">dns</span>
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-semibold text-white truncate">Tokyo-Edge-04</p>
<p class="text-xs text-white/40">latency: 180ms</p>
</div>
<div class="w-2 h-2 rounded-full bg-error"></div>
</div>
</div>
<div class="p-4 bg-white/5 rounded-b-2xl">
<button class="w-full py-2 text-xs font-bold text-primary hover:bg-primary/10 transition-colors rounded-lg">Посмотреть все узлы</button>
</div>
</div>
</div>
<!-- Users Table -->
<div class="glass-card rounded-2xl border border-white/5 overflow-hidden">
<div class="p-6 flex items-center justify-between">
<div>
<h4 class="text-xl font-bold text-white">Последние регистрации</h4>
<p class="text-white/40 text-sm">Новые пользователи в сети Knot за последние 24 часа</p>
</div>
<button class="bg-surface-container-highest hover:bg-surface-bright text-white px-4 py-2 rounded-lg text-sm font-semibold transition-colors flex items-center gap-2">
<span class="material-symbols-outlined text-sm" data-icon="filter_list">filter_list</span> Фильтр
</button>
</div>
<div class="overflow-x-auto">
<table class="w-full text-left">
<thead class="bg-white/5 text-[10px] font-bold text-white/40 uppercase tracking-widest">
<tr>
<th class="px-8 py-4">Пользователь</th>
<th class="px-8 py-4">Статус</th>
<th class="px-8 py-4">ID</th>
<th class="px-8 py-4">Последняя сессия</th>
<th class="px-8 py-4 text-right">Действия</th>
</tr>
</thead>
<tbody class="divide-y divide-white/5">
<tr class="hover:bg-white/5 transition-colors group">
<td class="px-8 py-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full border-2 border-primary/20 p-0.5">
<img alt="Алексей Медведев" class="w-full h-full rounded-full" data-alt="Cyberpunk style digital portrait of a young man with glowing neon accessories and dark background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBTbaM2vWj1NXg6mZ0oW48sCt35e7qb3hiKqIyQ8p0MP0e4ROwoKsL_6o_aS6Ui4IAV5az8qJtB-Tw-8LIRimY5HT3hjfMvxRqPCY5G5a8N_l9hJ-4MU2Baof2p6ioOI8qduV1shYVbaawQ12F4BIpf-WbKklcxd6gMtLyGD4nigLy6d3iwjVerYosxDO4_VcXJ74e8iz_bSz9UQggIq-dNzDmpMlFxHQpn5JnuygGpwd4MdwoH3ufUFjuyP6pEv1carCW61jEgNNE"/>
</div>
<div>
<p class="text-sm font-bold text-white">Алексей Медведев</p>
<p class="text-xs text-white/40">@medved_alex</p>
</div>
</div>
</td>
<td class="px-8 py-4">
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold bg-tertiary/10 text-tertiary uppercase">
<span class="w-1.5 h-1.5 rounded-full bg-tertiary"></span> Онлайн
</span>
</td>
<td class="px-8 py-4">
<code class="text-xs text-white/40 bg-white/5 px-2 py-1 rounded">#kt-8422-92</code>
</td>
<td class="px-8 py-4">
<p class="text-sm text-white/60">Сейчас</p>
</td>
<td class="px-8 py-4 text-right">
<button class="p-2 text-white/40 hover:text-primary transition-colors">
<span class="material-symbols-outlined" data-icon="more_vert">more_vert</span>
</button>
</td>
</tr>
<tr class="hover:bg-white/5 transition-colors group">
<td class="px-8 py-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full border-2 border-white/5 p-0.5">
<img alt="Елена Котова" class="w-full h-full rounded-full" data-alt="High quality photography of a woman with short hair in futuristic clothing, soft blue lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA0flGissKLQJb0Bp4pe7hVXX816-5eQjW_AipNJLR_gEF82kzmEXP1iQD0FubVB5VeKxW_2PPQiG9Mrvn4YjfCbd_IF0Pd7iF3c1Dot1-MwlqmxZNSKlZtyRrcyaKQsI8rhqVAT31Wp8EtyVEMpTWTlPujaPhBQIUdmtn0I3tNzB0hiFfPxZRNvJG3Uid2jLXLq5hmUR6LoqE9RfDOuoebyOpDBonkwASVf3Pd_Jc2WqnHYYscLW1Z6F9n1gV90weExNei3wtG_dA"/>
</div>
<div>
<p class="text-sm font-bold text-white">Елена Котова</p>
<p class="text-xs text-white/40">@kot_elena</p>
</div>
</div>
</td>
<td class="px-8 py-4">
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold bg-white/5 text-white/40 uppercase">
<span class="w-1.5 h-1.5 rounded-full bg-white/20"></span> Оффлайн
</span>
</td>
<td class="px-8 py-4">
<code class="text-xs text-white/40 bg-white/5 px-2 py-1 rounded">#kt-3310-15</code>
</td>
<td class="px-8 py-4">
<p class="text-sm text-white/60">2 часа назад</p>
</td>
<td class="px-8 py-4 text-right">
<button class="p-2 text-white/40 hover:text-primary transition-colors">
<span class="material-symbols-outlined" data-icon="more_vert">more_vert</span>
</button>
</td>
</tr>
<tr class="hover:bg-white/5 transition-colors group">
<td class="px-8 py-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full border-2 border-white/5 p-0.5">
<img alt="Иван Иванов" class="w-full h-full rounded-full" data-alt="Stylized modern character portrait, dark studio lighting with blue accents, sharp focus" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDHzO0GFYeh0U2rBi_kkSwVSFZbjIx0PBubwsWnZfD4VAByJ4IIEUMUEHK1SsIkUfshc7dSYxm9xk2ID5C8wMYJow-D_5EcjhHko7Pe6y7rwUZkDRi-NjmpzDfAtRiSg-DgbDV9VXT4Rxr0L1ZnijCSpk8QvNzbVDDv9V7QOJpJiqyzlv_1hTZnQJqNY3nuPBZerxcrKJv1DHTfYZ3xOlEljklJhGT3LFA9I0k6C_mSW4OEWWdieKTfagX_09WHl1CEwRDOnWTcuPo"/>
</div>
<div>
<p class="text-sm font-bold text-white">Иван Иванов</p>
<p class="text-xs text-white/40">@ivanov_dev</p>
</div>
</div>
</td>
<td class="px-8 py-4">
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold bg-tertiary/10 text-tertiary uppercase">
<span class="w-1.5 h-1.5 rounded-full bg-tertiary"></span> Онлайн
</span>
</td>
<td class="px-8 py-4">
<code class="text-xs text-white/40 bg-white/5 px-2 py-1 rounded">#kt-1029-44</code>
</td>
<td class="px-8 py-4">
<p class="text-sm text-white/60">Сейчас</p>
</td>
<td class="px-8 py-4 text-right">
<button class="p-2 text-white/40 hover:text-primary transition-colors">
<span class="material-symbols-outlined" data-icon="more_vert">more_vert</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="p-6 border-t border-white/5 bg-white/2 space-y-4">
<div class="flex items-center justify-between">
<p class="text-xs text-white/40 font-medium">Показано 3 из 1,240 новых пользователей</p>
<div class="flex gap-2">
<button class="p-2 bg-surface-container rounded-lg text-white/40 hover:text-white transition-colors">
<span class="material-symbols-outlined text-sm" data-icon="chevron_left">chevron_left</span>
</button>
<button class="p-2 bg-surface-container rounded-lg text-white hover:bg-primary/20 transition-colors">
<span class="material-symbols-outlined text-sm" data-icon="chevron_right">chevron_right</span>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Footer spacing -->
<footer class="mt-auto py-8 text-center border-t border-white/5">
<p class="text-[10px] text-white/20 font-bold uppercase tracking-[0.2em]">Knot Messenger Admin Engine v2.4.0-stable</p>
</footer>
</main>
</body></html>
Reference in New Issue View Git Blame Copy Permalink