418 lines
21 KiB
HTML
418 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Analytics - LocalBooru</title>
|
|
<style>
|
|
:root {
|
|
--bg-main: #1e1e1e;
|
|
--bg-header: #252525;
|
|
--bg-panel: #222222;
|
|
--bg-box: #2a2a2a;
|
|
--bg-input: #333;
|
|
--text-main: #eee;
|
|
--text-muted: #aaa;
|
|
--border-color: #444;
|
|
--link-color: #4da8da;
|
|
|
|
--color-g: #4caf50;
|
|
--color-s: #ff9800;
|
|
--color-q: #ffeb3b;
|
|
--color-e: #f44336;
|
|
}
|
|
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
body {
|
|
background-color: var(--bg-main);
|
|
color: var(--text-main);
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
font-size: 13px;
|
|
}
|
|
|
|
header {
|
|
display: flex; align-items: center; background-color: var(--bg-header);
|
|
padding: 10px 20px; border-bottom: 1px solid var(--border-color); gap: 15px; flex-wrap: wrap;
|
|
}
|
|
.logo { font-weight: bold; font-size: 18px; color: white; text-decoration: none; }
|
|
.analytics-link { color: var(--link-color); text-decoration: none; font-size: 12px; font-weight: bold;}
|
|
|
|
/* Search & Autocomplete */
|
|
.search-wrapper { flex-grow: 1; max-width: 400px; position: relative; }
|
|
.search-wrapper input {
|
|
width: 100%; background-color: var(--bg-input); border: 1px solid var(--border-color);
|
|
color: white; padding: 6px 10px; border-radius: 3px; outline: none;
|
|
}
|
|
.search-wrapper input:focus { border-color: var(--text-muted); }
|
|
.autocomplete-list {
|
|
position: absolute; top: 100%; left: 0; right: 0; background-color: var(--bg-box);
|
|
border: 1px solid var(--border-color); border-radius: 3px; margin-top: 4px;
|
|
list-style: none; z-index: 1000; max-height: 250px; overflow-y: auto;
|
|
box-shadow: 0 4px 10px rgba(0,0,0,0.5); display: none;
|
|
}
|
|
.autocomplete-item { padding: 8px 10px; cursor: pointer; display: flex; justify-content: space-between; border-bottom: 1px solid #333; }
|
|
.autocomplete-item:last-child { border-bottom: none; }
|
|
.autocomplete-item:hover { background-color: var(--bg-input); }
|
|
.autocomplete-count { color: var(--text-muted); font-size: 12px; }
|
|
|
|
main { padding: 20px; max-width: 1400px; margin: 0 auto; }
|
|
h1 { font-size: 20px; margin-bottom: 20px; color: white; }
|
|
|
|
.dashboard-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 20px;
|
|
align-items: start;
|
|
}
|
|
|
|
/* Панели */
|
|
.panel {
|
|
background-color: var(--bg-panel); border: 1px solid var(--border-color);
|
|
border-radius: 4px; padding: 15px; display: flex; flex-direction: column; gap: 15px;
|
|
}
|
|
|
|
.panel-header {
|
|
font-size: 16px; font-weight: bold; color: var(--link-color);
|
|
display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border-color);
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
/* Левая колонка - Статистика */
|
|
.left-col { display: flex; flex-direction: column; gap: 20px; }
|
|
|
|
.rating-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
|
|
.rating-box {
|
|
background-color: var(--bg-box); border: 1px solid var(--border-color);
|
|
border-radius: 4px; padding: 15px; text-align: center;
|
|
}
|
|
.rating-box.e { border-top: 2px solid var(--color-e); }
|
|
.rating-box.s { border-top: 2px solid var(--color-s); }
|
|
.rating-box.q { border-top: 2px solid var(--color-q); }
|
|
.rating-box.g { border-top: 2px solid var(--color-g); }
|
|
|
|
.rating-title { font-weight: bold; font-size: 15px; margin-bottom: 5px; }
|
|
.rating-box.e .rating-title { color: var(--color-e); }
|
|
.rating-box.s .rating-title { color: var(--color-s); }
|
|
.rating-box.q .rating-title { color: var(--color-q); }
|
|
.rating-box.g .rating-title { color: var(--color-g); }
|
|
|
|
.rating-count { color: var(--text-muted); margin-bottom: 3px; }
|
|
.rating-size { font-weight: bold; }
|
|
|
|
.data-list { list-style: none; display: flex; flex-direction: column; gap: 8px;}
|
|
.data-row { display: flex; justify-content: space-between; border-bottom: 1px solid #333; padding-bottom: 4px; }
|
|
.data-row.total { color: var(--color-g); font-weight: bold; border-top: 1px solid var(--border-color); padding-top: 8px; border-bottom: none;}
|
|
.data-row .val { font-weight: bold; }
|
|
|
|
.sub-text { font-size: 11px; color: var(--text-muted); margin-top: 5px; }
|
|
|
|
.ext-block { margin-bottom: 10px; }
|
|
.ext-block a { color: var(--link-color); text-decoration: none; word-break: break-all; }
|
|
.ext-block a:hover { text-decoration: underline; }
|
|
|
|
/* Таблицы тегов (Центр и Правая) */
|
|
.table-header { display: flex; justify-content: space-between; font-weight: bold; margin-bottom: 10px; color: white;}
|
|
.tag-row { display: flex; justify-content: space-between; margin-bottom: 8px; }
|
|
.tag-row a { color: var(--link-color); text-decoration: none; }
|
|
.tag-row a:hover { text-decoration: underline; }
|
|
|
|
/* Пагинация */
|
|
.pagination { display: flex; justify-content: center; gap: 5px; margin-top: 15px; align-items: center; }
|
|
.page-btn {
|
|
background-color: transparent; border: 1px solid var(--border-color); color: white;
|
|
padding: 4px 10px; border-radius: 3px; cursor: pointer;
|
|
}
|
|
.page-btn:hover { background-color: var(--bg-input); }
|
|
.page-info { font-weight: bold; padding: 0 10px; }
|
|
|
|
@media (max-width: 1000px) {
|
|
.dashboard-grid { grid-template-columns: 1fr 1fr; }
|
|
.left-col { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
|
|
}
|
|
@media (max-width: 700px) {
|
|
.dashboard-grid, .left-col { grid-template-columns: 1fr; }
|
|
header { justify-content: space-between; }
|
|
.search-wrapper { order: 3; max-width: 100%; width: 100%; margin-top: 10px;}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header>
|
|
<a href="index.html" class="logo">LocalBooru</a>
|
|
<a href="analytics.html" class="analytics-link">📊 Analytics</a>
|
|
<div class="search-wrapper">
|
|
<input type="text" id="searchInput" placeholder="Search tags...">
|
|
<ul id="autocompleteList" class="autocomplete-list"></ul>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<h1>Database Analytics</h1>
|
|
|
|
<div class="dashboard-grid" id="analyticsGrid" style="display: none;">
|
|
|
|
<!-- Левая колонка -->
|
|
<div class="left-col">
|
|
<div class="panel">
|
|
<div class="panel-header">⭐ Rating Breakdown</div>
|
|
<div class="rating-grid" id="ratingContainer">
|
|
<!-- JS inject -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<div class="panel-header">📁 Storage Breakdown</div>
|
|
<div class="data-list" id="storageContainer">
|
|
<!-- JS inject -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<div class="panel-header">🎨 Media Types (in img/)</div>
|
|
<div class="data-list" id="mediaContainer">
|
|
<!-- JS inject -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<div class="panel-header">📏 Extremes (Click to view)</div>
|
|
<div id="extremesContainer">
|
|
<!-- JS inject -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Центральная колонка -->
|
|
<div class="panel">
|
|
<div class="panel-header">🏷️ All Tags List</div>
|
|
<div class="table-header"><span>Tag</span><span>Count</span></div>
|
|
<div class="data-list" id="tagsListContainer"></div>
|
|
<div class="pagination">
|
|
<button class="page-btn" onclick="prevTagPage()">«</button>
|
|
<button class="page-btn" onclick="prevTagPage()">‹</button>
|
|
<span class="page-info" id="tagPageInfo">1 / 1</span>
|
|
<button class="page-btn" onclick="nextTagPage()">›</button>
|
|
<button class="page-btn" onclick="nextTagPage()">»</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Правая колонка -->
|
|
<div class="panel">
|
|
<div class="panel-header">🔗 Top 30 Tag Pairs</div>
|
|
<div class="table-header"><span>Pair</span><span>Count</span></div>
|
|
<div class="data-list" id="pairsContainer">
|
|
<!-- JS inject -->
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
<script>
|
|
// Инициализация поиска с автодополнением
|
|
const searchInput = document.getElementById('searchInput');
|
|
const list = document.getElementById('autocompleteList');
|
|
let debounceTimer;
|
|
|
|
searchInput.addEventListener('input', () => {
|
|
clearTimeout(debounceTimer);
|
|
const words = searchInput.value.split(' ');
|
|
const currentWord = words[words.length - 1];
|
|
|
|
if (currentWord.length < 2) { list.style.display = 'none'; return; }
|
|
|
|
debounceTimer = setTimeout(async () => {
|
|
const req = { type: "autocomplete", q: currentWord };
|
|
|
|
// РЕАЛЬНОЕ API: const data = await fetch('/api', ...);
|
|
const data = await mockAutocompleteAPI(req);
|
|
|
|
if (data.length === 0) { list.style.display = 'none'; return; }
|
|
|
|
list.innerHTML = data.map(item => `
|
|
<li class="autocomplete-item" data-tag="${item.tag}">
|
|
<span>${item.tag}</span><span class="autocomplete-count">${item.count}</span>
|
|
</li>
|
|
`).join('');
|
|
list.style.display = 'block';
|
|
|
|
list.querySelectorAll('.autocomplete-item').forEach(li => {
|
|
li.addEventListener('click', () => {
|
|
words[words.length - 1] = li.getAttribute('data-tag');
|
|
searchInput.value = words.join(' ') + ' ';
|
|
list.style.display = 'none';
|
|
searchInput.focus();
|
|
});
|
|
});
|
|
}, 200);
|
|
});
|
|
|
|
document.addEventListener('click', (e) => {
|
|
if (e.target !== searchInput && e.target !== list) list.style.display = 'none';
|
|
});
|
|
|
|
searchInput.addEventListener('keypress', (e) => {
|
|
if(e.key === 'Enter') window.location.href = `index.html?query=${searchInput.value.trim()}`;
|
|
});
|
|
|
|
// Состояние для пагинации тегов (для имитации UI)
|
|
let allTags = [];
|
|
let currentTagPage = 1;
|
|
const tagsPerPage = 22; // Примерно столько строк влезает на скрине
|
|
|
|
async function fetchAnalytics() {
|
|
const requestBody = { type: "analytics" };
|
|
|
|
try {
|
|
// РЕАЛЬНОЕ API: fetch('/api', ...);
|
|
const data = await generateMockAnalyticsData();
|
|
renderAnalytics(data);
|
|
document.getElementById('analyticsGrid').style.display = 'grid';
|
|
} catch (error) {
|
|
console.error(error);
|
|
document.body.innerHTML += `<div style="text-align:center; padding:50px;">Ошибка загрузки</div>`;
|
|
}
|
|
}
|
|
|
|
function renderAnalytics(data) {
|
|
// 1. Ratings
|
|
const r = data.ratings;
|
|
document.getElementById('ratingContainer').innerHTML = `
|
|
<div class="rating-box e"><div class="rating-title">Explicit</div><div class="rating-count">${r.explicit.count} items</div><div class="rating-size">${r.explicit.size}</div></div>
|
|
<div class="rating-box s"><div class="rating-title">Sensitive</div><div class="rating-count">${r.sensitive.count} items</div><div class="rating-size">${r.sensitive.size}</div></div>
|
|
<div class="rating-box q"><div class="rating-title">Questionable</div><div class="rating-count">${r.questionable.count} items</div><div class="rating-size">${r.questionable.size}</div></div>
|
|
<div class="rating-box g"><div class="rating-title">General</div><div class="rating-count">${r.general.count} items</div><div class="rating-size">${r.general.size}</div></div>
|
|
`;
|
|
|
|
// 2. Storage
|
|
const s = data.storage;
|
|
document.getElementById('storageContainer').innerHTML = `
|
|
<div class="data-row"><span>Logs (logs/):</span><span class="val">${s.logs}</span></div>
|
|
<div class="data-row"><span>Database (json_db/):</span><span class="val">${s.db}</span></div>
|
|
<div class="data-row"><span>Thumbnails (thumb/):</span><span class="val">${s.thumb}</span></div>
|
|
<div class="data-row"><span>Main Media (img/):</span><span class="val">${s.main}</span></div>
|
|
<div class="data-row total"><span>GRAND TOTAL:</span><span class="val">${s.total}</span></div>
|
|
`;
|
|
|
|
// 3. Media Types
|
|
const m = data.media;
|
|
document.getElementById('mediaContainer').innerHTML = `
|
|
<div class="data-row"><span>Static Images (IMG):</span><span class="val">${m.img_size}</span></div>
|
|
<div class="data-row"><span>Videos (VID):</span><span class="val">${m.vid_size}</span></div>
|
|
<div class="data-row"><span>Animations (GIF):</span><span class="val">${m.gif_size}</span></div>
|
|
<div class="sub-text">Total Valid Items Analyzed: <b>${m.total_items}</b><br>Average Weight per item: <b>${m.avg_weight}</b></div>
|
|
`;
|
|
|
|
// 4. Extremes
|
|
const e = data.extremes;
|
|
document.getElementById('extremesContainer').innerHTML = `
|
|
<div class="ext-block"><b>Largest Resolution:</b> ${e.largest.val}<br>(<a href="post.html?id=${e.largest.id}">${e.largest.file}</a>)</div>
|
|
<div class="ext-block"><b>Smallest Resolution:</b> ${e.smallest.val}<br>(<a href="post.html?id=${e.smallest.id}">${e.smallest.file}</a>)</div>
|
|
<div class="ext-block"><b>Heaviest File:</b> ${e.heaviest.val}<br>(<a href="post.html?id=${e.heaviest.id}">${e.heaviest.file}</a>)</div>
|
|
<div class="ext-block"><b>Lightest File:</b> ${e.lightest.val}<br>(<a href="post.html?id=${e.lightest.id}">${e.lightest.file}</a>)</div>
|
|
`;
|
|
|
|
// 5. Pairs (Right Column)
|
|
const pairsHtml = data.top_pairs.map(p => `
|
|
<div class="tag-row"><a href="index.html?query=${p.pair.replace(/ \+ /g, '+')}">${p.pair}</a> <span>${p.count}</span></div>
|
|
`).join('');
|
|
document.getElementById('pairsContainer').innerHTML = pairsHtml;
|
|
|
|
// 6. Tags (Center Column + Pagination Setup)
|
|
allTags = data.all_tags;
|
|
renderTagsPage();
|
|
}
|
|
|
|
// Логика пагинации для тегов
|
|
function renderTagsPage() {
|
|
const totalPages = Math.ceil(allTags.length / tagsPerPage);
|
|
document.getElementById('tagPageInfo').innerText = `${currentTagPage} / ${totalPages}`;
|
|
|
|
const start = (currentTagPage - 1) * tagsPerPage;
|
|
const end = start + tagsPerPage;
|
|
const pageTags = allTags.slice(start, end);
|
|
|
|
document.getElementById('tagsListContainer').innerHTML = pageTags.map(t => `
|
|
<div class="tag-row"><a href="index.html?query=${t.name}">${t.name}</a> <span>${t.count}</span></div>
|
|
`).join('');
|
|
}
|
|
|
|
window.prevTagPage = () => { if(currentTagPage > 1) { currentTagPage--; renderTagsPage(); }};
|
|
window.nextTagPage = () => { if(currentTagPage < Math.ceil(allTags.length / tagsPerPage)) { currentTagPage++; renderTagsPage(); }};
|
|
|
|
// --- ВРЕМЕННЫЕ ЗАГЛУШКИ ДЛЯ API ---
|
|
function mockAutocompleteAPI(req) {
|
|
return new Promise(res => {
|
|
const db = [
|
|
{tag: "long_hair", count: 8184}, {tag: "long_sleeves", count: 2828},
|
|
{tag: "looking_at_viewer", count: 8062}, {tag: "1girl", count: 11061},
|
|
{tag: "blue_hair", count: 3279}, {tag: "blue_eyes", count: 3279}
|
|
];
|
|
res(db.filter(t => t.tag.includes(req.q.toLowerCase())));
|
|
});
|
|
}
|
|
|
|
function generateMockAnalyticsData() {
|
|
return new Promise(resolve => {
|
|
setTimeout(() => {
|
|
resolve({
|
|
ratings: {
|
|
explicit: { count: 1605, size: "4.52 GB" },
|
|
sensitive: { count: 6623, size: "19.35 GB" },
|
|
questionable: { count: 1591, size: "4.72 GB" },
|
|
general: { count: 4184, size: "10.29 GB" }
|
|
},
|
|
storage: {
|
|
logs: "14.44 MB", db: "24.39 MB", thumb: "331.45 MB",
|
|
main: "38.88 GB", total: "39.24 GB"
|
|
},
|
|
media: {
|
|
img_size: "38.56 GB", vid_size: "140.80 MB", gif_size: "181.30 MB",
|
|
total_items: 14003, avg_weight: "2.84 MB"
|
|
},
|
|
extremes: {
|
|
largest: { val: "9921x14031", id: "5a63c", file: "5a63c28906dc7e0e...png" },
|
|
smallest: { val: "240x280", id: "8fc61", file: "8fc614e712ae2ad...gif" },
|
|
heaviest: { val: "65.21 MB", id: "4ab6a", file: "4ab6acf0a32c61...png" },
|
|
lightest: { val: "6.49 KB", id: "28c67", file: "28c679ea3483e1...png" }
|
|
},
|
|
// Генерируем массив на 765 страниц для имитации пагинации
|
|
all_tags: Array.from({length: 765 * 22}, (_, i) => ({
|
|
name: ["highres", "1girl", "solo", "virtual_youtuber", "long_hair", "looking_at_viewer", "breasts", "absurdres", "blush", "hololive", "smile", "open_mouth", "animal_ears", "multicolored_hair"][i % 14] + (i > 13 ? `_${i}` : ''),
|
|
count: 12700 - i
|
|
})),
|
|
top_pairs: [
|
|
{ pair: "1girl + highres", count: 10236 },
|
|
{ pair: "1girl + solo", count: 8902 },
|
|
{ pair: "highres + solo", count: 8557 },
|
|
{ pair: "highres + virtual_youtuber", count: 8192 },
|
|
{ pair: "highres + long_hair", count: 7531 },
|
|
{ pair: "highres + looking_at_viewer", count: 7479 },
|
|
{ pair: "1girl + virtual_youtuber", count: 7315 },
|
|
{ pair: "breasts + highres", count: 7096 },
|
|
{ pair: "1girl + looking_at_viewer", count: 7015 },
|
|
{ pair: "absurdres + highres", count: 6742 },
|
|
{ pair: "1girl + long_hair", count: 6560 },
|
|
{ pair: "1girl + breasts", count: 6407 },
|
|
{ pair: "looking_at_viewer + solo", count: 6230 },
|
|
{ pair: "solo + virtual_youtuber", count: 6011 },
|
|
{ pair: "1girl + absurdres", count: 5572 },
|
|
{ pair: "blush + highres", count: 5552 },
|
|
{ pair: "hololive + virtual_youtuber", count: 5494 },
|
|
{ pair: "long_hair + solo", count: 5490 },
|
|
{ pair: "looking_at_viewer + virtual_youtuber", count: 5332 },
|
|
{ pair: "breasts + solo", count: 5316 },
|
|
{ pair: "highres + hololive", count: 5073 },
|
|
{ pair: "breasts + virtual_youtuber", count: 5039 }
|
|
]
|
|
});
|
|
}, 300);
|
|
});
|
|
}
|
|
|
|
fetchAnalytics();
|
|
</script>
|
|
</body>
|
|
</html> |