:root{--bg:#071017;--panel:#0d1c25;--panel-2:#102530;--line:#1d3643;--text:#edf6f5;--muted:#91a8ae;--accent:#49e2cf;--lime:#b8f279;--orange:#ff9b64;--danger:#ff6f79;--radius:12px}*{box-sizing:border-box}html{background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15px}body{margin:0;min-width:320px;background:var(--bg)}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.topbar{height:74px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:36px;padding:0 clamp(18px,4vw,58px);position:sticky;top:0;background:rgba(7,16,23,.96);z-index:4}.brand{display:flex;align-items:center;gap:11px;min-width:210px;letter-spacing:.08em}.brand strong{font-size:15px;display:block}.brand small{font-size:9px;color:var(--muted);letter-spacing:.18em;display:block;margin-top:3px}.mark{display:grid;place-items:center;color:var(--bg);background:var(--lime);width:34px;height:34px;border-radius:9px;font-weight:900;font-size:11px;letter-spacing:-.08em}.topnav{display:flex;gap:4px;height:100%;align-items:center}.topnav a{color:var(--muted);text-decoration:none;padding:11px 14px;border-radius:8px}.topnav a.active,.topnav a:hover{background:#112a32;color:var(--text)}.top-actions{margin-left:auto;display:flex;align-items:center;gap:16px;color:var(--muted);font-size:12px}.status-dot:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:7px}.status-dot.offline:before{background:var(--danger)}.page{max-width:1440px;margin:0 auto;padding:42px clamp(18px,4vw,58px) 80px}.intro{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:34px}.context-label{font-size:11px;color:var(--accent);text-transform:uppercase;letter-spacing:.13em;margin:0 0 12px}.intro h1{font-size:clamp(28px,3.8vw,52px);letter-spacing:-.045em;line-height:1.02;margin:0 0 14px;max-width:650px}.lede{max-width:650px;color:var(--muted);line-height:1.55;margin:0}.intro-meta{font-size:12px;color:var(--muted);white-space:nowrap}.pulse{display:inline-block;width:8px;height:8px;background:var(--accent);border-radius:50%;margin-right:8px;box-shadow:0 0 0 5px rgba(73,226,207,.1)}.metrics{display:grid;grid-template-columns:repeat(4,1fr);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:26px}.metric{padding:21px 22px;min-height:130px;border-right:1px solid var(--line)}.metric:last-child{border-right:0}.metric span,.metric small{display:block;color:var(--muted);font-size:12px}.metric strong{display:block;font-size:28px;letter-spacing:-.04em;margin:12px 0 7px;font-variant-numeric:tabular-nums}.metric.primary strong{color:var(--lime)}.tabs{display:flex;gap:5px;margin-bottom:16px}.tab{border:0;background:transparent;color:var(--muted);padding:12px 15px;border-radius:8px}.tab span{font-size:11px;margin-left:5px;color:#718b92}.tab.active{background:var(--lime);color:#102013;font-weight:700}.tab.active span{color:#365b34}.workspace{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:26px 24px 20px}.section-head h2,.section-head h3{margin:0 0 7px;font-size:20px;letter-spacing:-.025em}.section-head p{margin:0;color:var(--muted);font-size:13px}.section-head.compact{padding:0 0 20px}.button{border:1px solid var(--line);border-radius:8px;padding:10px 14px;color:var(--text);background:var(--panel-2)}.button:hover{border-color:var(--accent);color:var(--accent)}.filters{display:flex;gap:9px;padding:0 24px 16px;flex-wrap:wrap}.search,.amount{display:flex;align-items:center;background:#10242f;border:1px solid var(--line);height:39px;border-radius:7px;color:var(--muted)}.search{flex:1 1 240px}.search span,.amount span{padding:0 10px}.search input,.amount input{width:100%;height:100%;border:0;outline:0;color:var(--text);background:transparent}.amount{width:120px}.filters select{height:39px;background:#10242f;border:1px solid var(--line);border-radius:7px;color:var(--text);padding:0 12px;min-width:145px}.filter-note{border-top:1px solid var(--line);color:var(--muted);padding:12px 24px;font-size:12px}.checkbox-mark{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:3px;background:var(--accent);color:#06221f;font-size:11px;margin-right:7px}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:850px}th,td{padding:15px 12px;border-top:1px solid var(--line);text-align:left}th{font-size:11px;color:var(--muted);font-weight:500;white-space:nowrap}td{font-size:13px}tbody tr{transition:background .16s ease}tbody tr:hover{background:#102733}td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}.star-col{width:46px;text-align:center}.link-col{width:88px}.player-cell{display:flex;align-items:center;gap:11px;min-width:220px}.avatar{width:36px;height:36px;border-radius:50%;background:#214350;object-fit:cover;flex:none}.player-name{font-weight:650}.player-sub{display:block;color:var(--muted);font-size:11px;margin-top:4px}.star{border:0;background:transparent;color:#6f8b93;font-size:18px;padding:0}.star.on{color:var(--lime)}.steam-link,.open-link{color:var(--accent);text-decoration:none;font-size:12px}.blocked-row{opacity:.52}.danger-label{color:var(--danger);font-size:10px;margin-left:7px}.empty{text-align:center;padding:44px;color:var(--muted)}.hidden{display:none!important}.active-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 24px 24px}.active-card{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:20px}.active-rank{color:var(--orange);font-size:12px;font-weight:700}.active-card h3{margin:16px 0 4px;font-size:18px}.active-card p{margin:0;color:var(--muted);font-size:12px}.active-score{font-size:34px;font-weight:650;margin:22px 0 3px;color:var(--lime)}.chips{display:flex;gap:6px;flex-wrap:wrap}.chip{font-size:11px;background:#173b3b;color:#b9e8d9;padding:6px 8px;border-radius:5px}.info-view{display:grid;grid-template-columns:1.6fr 1fr;gap:24px;padding:24px}.chart-panel,.insight-panel{background:var(--panel-2);padding:24px;border-radius:10px}.bars{display:grid;gap:12px}.bar-row{display:grid;grid-template-columns:130px 1fr 78px;gap:12px;align-items:center;font-size:12px}.bar-track{height:10px;background:#18333d;border-radius:5px;overflow:hidden}.bar-fill{height:100%;background:var(--accent);border-radius:5px}.bar-value{text-align:right;color:var(--text);font-variant-numeric:tabular-nums}.insight-panel h3{font-size:23px;letter-spacing:-.03em;margin:0 0 12px}.insight-panel p{color:var(--muted);line-height:1.6}.formula{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);font-size:25px;font-variant-numeric:tabular-nums}.formula b{color:var(--lime);float:right}.dialog{width:min(880px,calc(100% - 28px));max-height:88vh;border:1px solid var(--line);border-radius:14px;background:var(--bg);color:var(--text);padding:0}.dialog::backdrop{background:rgba(0,0,0,.72)}.dialog-head{padding:22px 26px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start}.dialog-head h2{font-size:27px;margin:0 0 6px}.dialog-head p{color:var(--muted);margin:0;font-size:12px}.icon-button{background:#11232c;border:1px solid var(--line);color:var(--text);font-size:25px;width:36px;height:36px;border-radius:8px}.dialog-body{padding:24px;overflow:auto}.profile-top{display:flex;justify-content:space-between;gap:16px;align-items:center}.profile-ident{display:flex;gap:14px;align-items:center}.profile-ident .avatar{width:64px;height:64px}.profile-actions{display:flex;gap:8px;flex-wrap:wrap}.profile-actions button{padding:9px 12px;border-radius:7px;border:1px solid var(--line);background:var(--panel);color:var(--text)}.profile-actions button.active{color:var(--lime);border-color:var(--lime)}.profile-actions button.block.active{color:var(--danger);border-color:var(--danger)}.detail-metrics{display:grid;grid-template-columns:repeat(4,1fr);margin:22px 0;background:var(--panel);border-radius:10px;border:1px solid var(--line);overflow:hidden}.detail-metric{padding:16px;border-right:1px solid var(--line)}.detail-metric:last-child{border:0}.detail-metric span{display:block;color:var(--muted);font-size:11px}.detail-metric strong{display:block;margin-top:8px;font-size:20px}.detail-title{font-size:16px;margin:28px 0 12px}.detail-table{width:100%;min-width:0}.detail-table td,.detail-table th{padding:12px 8px}.toast{position:fixed;right:24px;bottom:24px;padding:12px 16px;background:#132b33;color:var(--text);border:1px solid var(--accent);border-radius:8px;opacity:0;transform:translateY(8px);transition:.2s;pointer-events:none}.toast.show{opacity:1;transform:none}@media(max-width:900px){.topbar{gap:14px}.topnav{display:none}.metrics{grid-template-columns:repeat(2,1fr)}.metric:nth-child(2){border-right:0}.metric:nth-child(-n+2){border-bottom:1px solid var(--line)}.active-grid{grid-template-columns:1fr 1fr}.info-view{grid-template-columns:1fr}}@media(max-width:600px){.page{padding-top:28px}.topbar{height:62px}.top-actions .status-dot{display:none}.brand{min-width:0}.intro{display:block}.intro-meta{margin-top:20px}.metrics{grid-template-columns:1fr 1fr}.metric{min-height:105px;padding:15px}.metric strong{font-size:22px}.section-head{padding:20px 16px 16px;display:block}.section-head .button{margin-top:16px}.filters{padding:0 16px 14px}.filters select,.amount{flex:1;min-width:130px}.filter-note{padding:11px 16px}.active-grid{grid-template-columns:1fr;padding:0 16px 16px}.info-view{padding:16px}.bar-row{grid-template-columns:94px 1fr 68px}.detail-metrics{grid-template-columns:1fr 1fr}.detail-metric:nth-child(2){border-right:0}.detail-metric:nth-child(-n+2){border-bottom:1px solid var(--line)}.profile-top{align-items:flex-start;display:block}.profile-actions{margin-top:16px}}\n*** Add File: D:\gpthype\public\app.js const $ = (s, root = document) => root.querySelector(s); const $$ = (s, root = document) => [...root.querySelectorAll(s)]; const state = { view: 'players', rows: [], demo: false, updated: null }; const demoRows = [ { user_id: '76561198042157010', display_name: 'KremlinKite', avatar_url: '', created_battles: 42, total_value: 12640.5, max_bet: 920, last_battle_at: new Date(Date.now() - 4 * 60_000).toISOString(), is_favorite: 1, is_blocked: 0 }, { user_id: '76561198110422986', display_name: 'dropzone.exe', avatar_url: '', created_battles: 27, total_value: 7840, max_bet: 640, last_battle_at: new Date(Date.now() - 11 * 60_000).toISOString(), is_favorite: 0, is_blocked: 0 }, { user_id: '76561197961200411', display_name: 'N0VA', avatar_url: '', created_battles: 19, total_value: 4350, max_bet: 500, last_battle_at: new Date(Date.now() - 24 * 60_000).toISOString(), is_favorite: 0, is_blocked: 0 }, { user_id: '76561198155690122', display_name: 'Mika / HD', avatar_url: '', created_battles: 13, total_value: 2680, max_bet: 300, last_battle_at: new Date(Date.now() - 46 * 60_000).toISOString(), is_favorite: 0, is_blocked: 1 }, { user_id: '76561198099811203', display_name: 'case_hunter', avatar_url: '', created_battles: 8, total_value: 1270, max_bet: 250, last_battle_at: new Date(Date.now() - 74 * 60_000).toISOString(), is_favorite: 0, is_blocked: 0 }, { user_id: '76561198201000442', display_name: 'satori', avatar_url: '', created_battles: 5, total_value: 920, max_bet: 200, last_battle_at: new Date(Date.now() - 103 * 60_000).toISOString(), is_favorite: 1, is_blocked: 0 } ]; const money = n => `$${Number(n || 0).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`; const count = n => Number(n || 0).toLocaleString('en-US'); const date = value => value ? new Intl.DateTimeFormat('ru-RU', { timeZone: 'Europe/Chisinau', day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' }).format(new Date(value)) : '-'; const initials = name => String(name || '?').slice(0, 2).toUpperCase(); function avatar(row, size = '') { return row.avatar_url ? `` : `${initials(row.display_name)}`; } function queryParams() { return new URLSearchParams({ search: $('#search').value, sort: $('#sort').value, status: $('#status').value, min: $('#min').value, max: $('#max').value }); } async function load() { try { const res = await fetch('/api/steam-players?' + queryParams()); const data = await res.json(); state.rows = data.rows || []; state.demo = !state.rows.length && !$('#search').value && $('#status').value === 'all'; if (state.demo) state.rows = demoRows; $('#connection').textContent = state.demo ? 'Демо-данные' : 'Сборщик подключён'; $('#connection').classList.toggle('offline', false); } catch { state.rows = demoRows; state.demo = true; $('#connection').textContent = 'Офлайн · демо'; $('#connection').classList.add('offline'); } state.updated = new Date(); render(); } function render() { const rows = state.rows; const totalBattles = rows.reduce((s, r) => s + Number(r.created_battles || 0), 0); const totalVolume = rows.reduce((s, r) => s + Number(r.total_value || 0), 0); const maxBet = Math.max(0, ...rows.map(r => Number(r.max_bet || 0))); $('#metricPlayers').textContent = count(rows.length); $('#metricBattles').textContent = count(totalBattles); $('#metricVolume').textContent = money(totalVolume); $('#metricMax').textContent = money(maxBet); $('#playersCount').textContent = count(rows.length); $('#updated').textContent = state.demo ? 'Предпросмотр интерфейса' : `Обновлено ${date(state.updated)}`; $('#playersBody').innerHTML = rows.map((r, i) => `
${avatar(r)}
${escapeHtml(r.display_name || 'Без имени')}${r.is_blocked ? 'BLOCK' : ''}Steam · ${escapeHtml(r.user_id)}
${count(r.created_battles)}${money(r.total_value)}${money(r.max_bet)}${date(r.last_battle_at)}Steam ↗Открыть`).join(''); $('#empty').classList.toggle('hidden', rows.length > 0); renderActive(); renderInfo(); } function renderActive() { const active = [...state.rows].filter(r => Date.now() - new Date(r.last_battle_at).getTime() < 30 * 60_000).sort((a, b) => b.total_value - a.total_value).slice(0, 6); $('#activeGrid').innerHTML = (active.length ? active : state.rows.slice(0, 6)).map((r, i) => `
${i < 3 ? ['1ST PLACE', '2ND PLACE', '3RD PLACE'][i] : `#${i + 1}`}

${escapeHtml(r.display_name)}

Steam · ${escapeHtml(r.user_id)}

${money(r.total_value)}
${count(r.created_battles)} созданоMax Bet ${money(r.max_bet)}
`).join(''); } function renderInfo() { const rows = [...state.rows].sort((a, b) => b.total_value - a.total_value).slice(0, 8); const max = Math.max(1, ...rows.map(r => r.total_value)); $('#volumeChart').innerHTML = rows.map(r => `
${escapeHtml(r.display_name)}
${money(r.total_value)}
`).join(''); } function escapeHtml(value) { return String(value).replace(/[&<>"']/g, c => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c])); } async function openPlayer(id, row) { $('#dialogName').textContent = row.display_name || 'Игрок'; $('#dialogId').textContent = `Steam · ${row.user_id}`; $('#dialogBody').innerHTML = '

Загружаем статистику…

'; $('#playerDialog').showModal(); let detail = null; try { const res = await fetch('/api/player?id=' + encodeURIComponent(id)); if (res.ok) detail = await res.json(); } catch {} const d = detail || { player: row, stats: row, battles: [] }; const p = d.player || row; const s = d.stats || row; $('#dialogBody').innerHTML = `
${avatar(p, 'large')}

${escapeHtml(p.display_name || row.display_name)}

Steam ID ${escapeHtml(p.user_id || row.user_id)}

Создано батлов${count(s.created_battles)}
Общий объём${money(s.total_value)}
Max Bet${money(s.max_bet)}
Последний батл${date(s.last_battle_at)}

Последние 10 созданных батлов

${(d.battles || []).map(b => ``).join('') || ''}
БатлСтоимостьСозданСтатус
#${escapeHtml(b.id)} ↗${money(b.value)}${date(b.created_at)}${escapeHtml(b.status || '-')}
История батлов пока не загружена.

Лучший дроп, удачный и любимый кейс появятся автоматически после накопления round boxOpening в архиве.

`; $$('#dialogBody [data-detail-action]').forEach(btn => btn.addEventListener('click', () => updatePreference(row, btn.dataset.detailAction))); } async function updatePreference(row, action) { const field = action === 'favorite' ? 'is_favorite' : 'is_blocked'; const value = !Boolean(row[field]); row[field] = value ? 1 : 0; try { await fetch('/api/player-preference', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ id: row.user_id, field, value }) }); } catch {} showToast(action === 'favorite' ? (value ? 'Игрок добавлен в избранные' : 'Игрок убран из избранных') : (value ? 'Игрок помечен как Block' : 'Игрок разблокирован')); render(); openPlayer(row.user_id, row); } function showToast(text) { const t = $('#toast'); t.textContent = text; t.classList.add('show'); setTimeout(() => t.classList.remove('show'), 1800); } $$('.tab').forEach(tab => tab.addEventListener('click', () => { $$('.tab').forEach(x => x.classList.remove('active')); tab.classList.add('active'); state.view = tab.dataset.view; $('#tableView').classList.toggle('hidden', state.view !== 'players'); $('#activeView').classList.toggle('hidden', state.view !== 'active'); $('#infoView').classList.toggle('hidden', state.view !== 'infographics'); $('#viewTitle').textContent = state.view === 'active' ? 'Активные игроки' : state.view === 'infographics' ? 'Инфографика' : 'Игроки'; })); $('#playersBody').addEventListener('click', e => { const tr = e.target.closest('tr'); if (!tr) return; const row = state.rows.find(x => String(x.user_id) === String(tr.dataset.id)); if (e.target.closest('[data-action="favorite"]')) { row.is_favorite = row.is_favorite ? 0 : 1; updatePreference(row, 'favorite'); } else if (e.target.closest('[data-action="open"]') || !e.target.closest('a')) { e.preventDefault(); openPlayer(row.user_id, row); } }); $('#closeDialog').addEventListener('click', () => $('#playerDialog').close()); $('#playerDialog').addEventListener('click', e => { if (e.target === $('#playerDialog')) $('#playerDialog').close(); }); $('#refresh').addEventListener('click', load); ['search', 'sort', 'status', 'min', 'max'].forEach(id => $('#' + id).addEventListener(id === 'search' ? 'input' : 'change', () => { clearTimeout(window.filterTimer); window.filterTimer = setTimeout(load, 220); })); $('#export').addEventListener('click', () => { const rows = [['nickname', 'steam_id', 'created_battles', 'total_value', 'max_bet', 'last_battle_at'], ...state.rows.map(r => [r.display_name, r.user_id, r.created_battles, r.total_value, r.max_bet, r.last_battle_at])]; const csv = rows.map(r => r.map(v => `"${String(v ?? '').replaceAll('"', '""')}"`).join(',')).join('\\n'); const a = document.createElement('a'); a.href = URL.createObjectURL(new Blob([csv], { type: 'text/csv' })); a.download = 'hypedrop-steam-players.csv'; a.click(); }); load(); .avatar.large{width:64px;height:64px}.profile-facts{display:flex;gap:8px;flex-wrap:wrap}.fact{background:#10242f;border:1px solid var(--line);border-radius:7px;padding:10px 12px;color:var(--text);font-size:12px}.fact b{display:block;color:var(--muted);font-size:10px;font-weight:500;margin-bottom:4px}.fact.pending{color:var(--muted)}.fact.hidden-fact{color:var(--danger);border-color:rgba(255,111,121,.42)} .primary{background:var(--lime);color:#102013;border-color:var(--lime);font-weight:700}.login-page{min-height:100vh;display:grid;place-items:center;padding:24px}.login-card{width:min(420px,100%);background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:34px}.login-card h1{margin:0 0 10px;font-size:28px}.login-copy{color:var(--muted);line-height:1.5;margin:0 0 24px}.login-card form{display:grid;gap:15px}.login-card label,.settings-form label{display:grid;gap:7px;color:var(--muted);font-size:12px}.login-card input,.settings-form input{height:42px;border:1px solid var(--line);border-radius:7px;background:#10242f;color:var(--text);padding:0 12px}.login-error{color:var(--danger);font-size:12px;margin:0}.settings-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}.settings-actions{display:flex;gap:10px;margin-top:20px}.trend-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.trend-card{background:#10242f;border:1px solid var(--line);border-radius:9px;padding:15px}.trend-card h4{margin:0 0 10px;font-size:13px}.trend-bars{height:110px;display:flex;align-items:end;gap:3px}.trend-bar{flex:1;background:var(--accent);min-height:2px;border-radius:3px 3px 0 0}.trend-total{color:var(--muted);font-size:11px;margin-top:9px}@media(max-width:600px){.settings-form,.trend-grid{grid-template-columns:1fr}.top-actions{gap:5px}.top-actions .button{padding:8px 9px;font-size:11px}.top-actions #browser{display:none}} .resource-metrics{color:var(--muted);font-size:11px;white-space:nowrap}.sortable{cursor:pointer}.sortable:hover{color:var(--accent)} .star{font-size:21px;line-height:1;color:#78919b}.star.on{color:#ff6373}.star:hover{color:#ff6373} .avatar-link{display:block}.copy-name{border:0;background:transparent;padding:0 0 0 7px;vertical-align:middle}.copy-icon{display:inline-block;width:11px;height:11px;border:1px solid #77939b;border-radius:2px;position:relative}.copy-icon:before{content:"";position:absolute;width:8px;height:8px;border:1px solid #77939b;border-radius:2px;left:-4px;top:3px;background:var(--panel)}.copy-name:hover .copy-icon,.copy-name:hover .copy-icon:before{border-color:var(--accent)} .avatar-link{display:block}.copy-name{border:0;background:transparent;padding:0 0 0 7px;vertical-align:middle}.copy-icon{display:inline-block;width:11px;height:11px;border:1px solid #77939b;border-radius:2px;position:relative}.copy-icon:before{content:"";position:absolute;width:8px;height:8px;border:1px solid #77939b;border-radius:2px;left:-4px;top:3px;background:var(--panel)}.copy-name:hover .copy-icon,.copy-name:hover .copy-icon:before{border-color:var(--accent)} .remote-browser{padding:16px;height:100vh;display:flex;flex-direction:column;overflow:hidden}.remote-browser .browser-head{flex:0 0 auto;margin-bottom:4px}.remote-browser .browser-note{flex:0 0 auto;margin:5px 0 12px;color:var(--muted)}#browserScreen{flex:1;min-height:320px;background:#05070b;overflow:hidden;border:1px solid var(--line);border-radius:8px;position:relative}#browserScreen canvas{display:block}