Damir Radulić
1035 lines
46 KiB
Plaintext
1035 lines
46 KiB
Plaintext
<!DOCTYPE html>
|
||
<html lang="hr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
|
||
<meta name="theme-color" content="#0A0E1A">
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="mobile-web-app-capable" content="yes">
|
||
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='12' fill='%230d0d0d'/%3E%3Ctext x='32' y='42' font-family='IBM Plex Sans,sans-serif' font-size='28' font-weight='700' fill='%233b82c4' text-anchor='middle'%3EPG%3C/text%3E%3C/svg%3E">
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||
<!-- v=1777465915 -->
|
||
<title>PGŽ Sport · Ri.NET</title>
|
||
<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=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap" rel="stylesheet">
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');
|
||
/* ═══════════════════════════════════════════
|
||
PGŽ SPORT — RI.NET UNIFIED TOKENS
|
||
Synced with /opt/rinet-v4/app/src/index.css
|
||
v2.0.0 | 29.04.2026
|
||
═══════════════════════════════════════════ */
|
||
:root {
|
||
/* === MASTER TOKENS (klasik-aligned) === */
|
||
--bg: #0d0d0d;
|
||
--bg2: #141414;
|
||
--bg3: #1a1a1a;
|
||
--bg4: #1a2332;
|
||
--bg5: #243044;
|
||
|
||
--border: #1e293b;
|
||
--border2: rgba(30,41,59,0.6);
|
||
--border3: rgba(56, 97, 150, 0.4);
|
||
|
||
--text: #94a3b8;
|
||
--text2: #cbd5e1;
|
||
--text3: #c0c0d0;
|
||
--text-bright: #f1f5f9;
|
||
--text-dim: #6B7A99;
|
||
|
||
--accent: #3b82c4;
|
||
--accent2: #2563a0;
|
||
--accent-glow: rgba(59, 130, 196, 0.12);
|
||
|
||
--green: #22c55e;
|
||
--red: #ef4444;
|
||
--amber: #f59e0b;
|
||
--cyan: #06b6d4;
|
||
|
||
--sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
|
||
--mono: 'JetBrains Mono', 'Fira Code', SF Mono, Consolas, monospace;
|
||
|
||
--radius: 4px;
|
||
--radius-lg: 6px;
|
||
|
||
--chart1: #3b82c4;
|
||
--chart2: #1d6fa8;
|
||
--chart3: #0f5a8e;
|
||
--chart4: #064572;
|
||
|
||
--gradient-main: linear-gradient(135deg, #1a3a5c, #0f2440);
|
||
--gradient-accent: linear-gradient(90deg, #2563a0, #1d6fa8);
|
||
|
||
/* === LEGACY ALIASES (sport-specific, dash variants) === */
|
||
--bg-2: var(--bg2);
|
||
--bg-3: var(--bg3);
|
||
--border-2: var(--border2);
|
||
--accent-2: var(--accent2);
|
||
--text-2: var(--text);
|
||
--text-3: var(--text-dim);
|
||
|
||
/* === SEMANTIC ALIASES === */
|
||
--ok: var(--green);
|
||
--warn: var(--amber);
|
||
--crit: var(--red);
|
||
|
||
/* === DOMAIN COLORS (kept for sport visual variety) === */
|
||
--gold: var(--amber);
|
||
--purple: #A78BFA;
|
||
--pink: #F472B6;
|
||
|
||
/* === LEGACY RADIUS === */
|
||
--r: var(--radius-lg);
|
||
--r-sm: var(--radius);
|
||
|
||
/* === PANEL ALIASES (sport had panel/panel-2) === */
|
||
--panel: var(--bg2);
|
||
--panel-2: var(--bg4);
|
||
}
|
||
/* ═══ MASTER UTILITY CLASSES — append, sport overrides may follow ═══ */
|
||
.ri-card {
|
||
background: var(--bg2);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-lg);
|
||
padding: 12px;
|
||
transition: border-color 0.15s;
|
||
}
|
||
.ri-card:hover { border-color: var(--border2); }
|
||
|
||
.ri-glass {
|
||
background: rgba(8, 12, 20, 0.85);
|
||
backdrop-filter: blur(12px);
|
||
-webkit-backdrop-filter: blur(12px);
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.ri-tbl { width:100%; border-collapse:collapse; font-family:var(--mono); font-size:11px; }
|
||
.ri-tbl th { text-align:left; padding:6px 8px; font-weight:500; font-size:10px; text-transform:uppercase; letter-spacing:0.5px; color:var(--text3); border-bottom:1px solid var(--border2); background:var(--bg3); }
|
||
.ri-tbl td { padding:4px 8px; border-bottom:1px solid var(--border); white-space:nowrap; color:var(--text); }
|
||
.ri-tbl tr:hover td { background: var(--accent-glow); }
|
||
|
||
.ri-btn { font-family:var(--sans); font-size:11px; font-weight:500; padding:6px 12px; border-radius:var(--radius); border:1px solid var(--border2); background:var(--bg3); color:var(--text); cursor:pointer; transition:all 0.15s; letter-spacing:0.02em; }
|
||
.ri-btn:hover { background:var(--bg4); border-color:var(--border3); }
|
||
.ri-btn-primary { background:var(--accent2); border-color:var(--accent); color:white; }
|
||
.ri-btn-primary:hover { background:var(--accent); }
|
||
.ri-btn-ghost { background:transparent; border-color:var(--border); color:var(--text2); }
|
||
|
||
.ri-kpi-value { font-family:var(--mono); font-weight:700; font-size:20px; color:var(--text-bright); letter-spacing:-0.02em; }
|
||
.ri-kpi-label { font-size:9px; text-transform:uppercase; letter-spacing:0.8px; color:var(--text3); margin-top:2px; }
|
||
|
||
.risk { font-family:var(--mono); font-size:9px; font-weight:700; padding:2px 6px; border-radius:2px; }
|
||
.risk-critical { background:rgba(239,68,68,0.12); color:var(--red); }
|
||
.risk-high { background:rgba(212,160,23,0.12); color:var(--amber); }
|
||
.risk-medium { background:rgba(6,182,212,0.12); color:var(--cyan); }
|
||
.risk-low { background:rgba(34,197,94,0.12); color:var(--green); }
|
||
|
||
/* ═══ ICON — Lucide stroke style ═══ */
|
||
.ico-svg, .ri-ico {
|
||
stroke: currentColor;
|
||
stroke-width: 1.5;
|
||
stroke-linecap: round;
|
||
stroke-linejoin: round;
|
||
fill: none;
|
||
flex-shrink: 0;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
|
||
html, body {
|
||
height: 100%;
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
font-family: 'IBM Plex Sans', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
-webkit-font-smoothing: antialiased;
|
||
overflow: hidden;
|
||
}
|
||
.mono { font-family: 'JetBrains Mono', SF Mono, Consolas, monospace; }
|
||
|
||
::-webkit-scrollbar { width: 8px; height: 8px; }
|
||
::-webkit-scrollbar-track { background: transparent; }
|
||
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }
|
||
|
||
/* === LAYOUT === */
|
||
.app { display: flex; height: 100vh; height: 100dvh; }
|
||
|
||
/* SIDEBAR DESKTOP */
|
||
.sidebar {
|
||
width: 260px;
|
||
background: var(--bg-2);
|
||
border-right: 1px solid var(--border);
|
||
display: flex; flex-direction: column;
|
||
flex-shrink: 0;
|
||
}
|
||
.sb-head { padding: 16px 18px; border-bottom: 1px solid var(--border); }
|
||
.brand { display: flex; align-items: center; gap: 11px; }
|
||
.brand-mark {
|
||
width: 34px; height: 34px;
|
||
background: linear-gradient(135deg, var(--accent), var(--gold));
|
||
border-radius: 8px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
color: white; font-weight: 700; font-size: 13px; letter-spacing: -0.5px;
|
||
box-shadow: 0 2px 12px rgba(59,130,196,0.4);
|
||
}
|
||
.brand-text h1 { font-size: 15px; font-weight: 700; letter-spacing: -0.3px; line-height: 1.2; }
|
||
.brand-text p { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 1.2px; margin-top: 2px; }
|
||
|
||
.role-pill {
|
||
margin-top: 12px; display: inline-flex; align-items: center; gap: 6px;
|
||
padding: 4px 10px; border-radius: 100px;
|
||
font-size: 10px; font-weight: 700; letter-spacing: 0.7px;
|
||
cursor: pointer; transition: 150ms;
|
||
}
|
||
.role-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; }
|
||
.role-pill.viewer { background: rgba(59,130,196,0.12); color: var(--accent); border: 1px solid rgba(59,130,196,0.3); }
|
||
.role-pill.viewer::before { background: var(--accent); }
|
||
.role-pill.admin { background: rgba(239,68,68,0.12); color: var(--crit); border: 1px solid rgba(239,68,68,0.3); }
|
||
.role-pill.admin::before { background: var(--crit); }
|
||
|
||
.nav { flex: 1; overflow-y: auto; padding: 8px 0 16px; }
|
||
.nav-sec {
|
||
padding: 12px 18px 4px;
|
||
color: var(--text-3); text-transform: uppercase;
|
||
font-size: 10px; font-weight: 700; letter-spacing: 1.2px;
|
||
}
|
||
.nav-i {
|
||
display: flex; align-items: center; gap: 11px;
|
||
padding: 9px 18px;
|
||
color: var(--text-2); cursor: pointer;
|
||
transition: 150ms;
|
||
border-left: 2px solid transparent;
|
||
font-size: 13px; font-weight: 500;
|
||
}
|
||
.nav-i:hover { background: var(--panel); color: var(--text); }
|
||
.nav-i.active {
|
||
background: linear-gradient(90deg, rgba(59,130,196,0.14) 0%, transparent 100%);
|
||
color: var(--accent);
|
||
border-left-color: var(--accent);
|
||
}
|
||
.nav-i .ico { width: 16px; height: 16px; flex-shrink: 0; }
|
||
.nav-i .b {
|
||
margin-left: auto; background: var(--crit); color: white;
|
||
font-size: 9px; font-weight: 700; padding: 2px 6px;
|
||
border-radius: 100px; min-width: 18px; text-align: center;
|
||
}
|
||
.nav-i .b.warn { background: var(--warn); color: var(--bg); }
|
||
|
||
.sb-foot {
|
||
padding: 11px 18px; border-top: 1px solid var(--border);
|
||
color: var(--text-3); font-size: 10px; line-height: 1.5;
|
||
}
|
||
|
||
/* MAIN */
|
||
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
|
||
|
||
.topbar {
|
||
background: var(--bg-2);
|
||
border-bottom: 1px solid var(--border);
|
||
padding: 12px 20px;
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
gap: 12px;
|
||
flex-shrink: 0;
|
||
}
|
||
.tb-title { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
|
||
.tb-bc { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700; }
|
||
.tb-title h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; line-height: 1.3; }
|
||
.tb-meta { color: var(--text-3); font-size: 11px; display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
|
||
.live-dot {
|
||
display: inline-block; width: 6px; height: 6px;
|
||
background: var(--ok); border-radius: 50%;
|
||
animation: pulse 2s infinite;
|
||
}
|
||
@keyframes pulse {
|
||
0%, 100% { box-shadow: 0 0 0 0 rgba(45,212,191,0.55); }
|
||
50% { box-shadow: 0 0 0 5px rgba(45,212,191,0); }
|
||
}
|
||
.menu-btn {
|
||
display: none;
|
||
width: 36px; height: 36px;
|
||
border: 1px solid var(--border); background: var(--panel);
|
||
color: var(--text); border-radius: 8px;
|
||
align-items: center; justify-content: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.content { flex: 1; overflow-y: auto; padding: 18px 20px 80px; }
|
||
.content > .inner { max-width: 1500px; margin: 0 auto; }
|
||
|
||
/* GRIDS */
|
||
.grid { display: grid; gap: 12px; }
|
||
.g2 { grid-template-columns: repeat(2, 1fr); }
|
||
.g3 { grid-template-columns: repeat(3, 1fr); }
|
||
.g4 { grid-template-columns: repeat(4, 1fr); }
|
||
|
||
/* CARDS */
|
||
.card {
|
||
background: var(--panel); border: 1px solid var(--border);
|
||
border-radius: var(--r); padding: 14px 16px;
|
||
transition: border-color 150ms;
|
||
}
|
||
.card.acc { border-left: 3px solid var(--accent); }
|
||
.card.gold { border-left: 3px solid var(--gold); }
|
||
.card.ok { border-left: 3px solid var(--ok); }
|
||
.card.warn { border-left: 3px solid var(--warn); }
|
||
.card.crit { border-left: 3px solid var(--crit); }
|
||
|
||
.stat-l {
|
||
color: var(--text-3); font-size: 10px;
|
||
text-transform: uppercase; letter-spacing: 1px; font-weight: 700;
|
||
margin-bottom: 6px;
|
||
display: flex; align-items: center; gap: 5px;
|
||
}
|
||
.stat-v {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 26px; font-weight: 600; letter-spacing: -0.5px; line-height: 1.05;
|
||
}
|
||
.stat-v.sm { font-size: 18px; }
|
||
.stat-v.lg { font-size: 30px; }
|
||
.stat-d { font-size: 10.5px; margin-top: 5px; color: var(--text-3); }
|
||
.stat-d.up { color: var(--ok); }
|
||
.stat-d.down { color: var(--crit); }
|
||
.card.crit .stat-v { color: var(--crit); }
|
||
.card.warn .stat-v { color: var(--warn); }
|
||
.card.ok .stat-v { color: var(--ok); }
|
||
.card.acc .stat-v { color: var(--accent); }
|
||
.card.gold .stat-v { color: var(--gold); }
|
||
|
||
.ct {
|
||
font-size: 11px; font-weight: 700; color: var(--text);
|
||
text-transform: uppercase; letter-spacing: 1px;
|
||
margin-bottom: 12px; padding-bottom: 10px;
|
||
border-bottom: 1px solid var(--border);
|
||
display: flex; justify-content: space-between; align-items: center; gap: 8px;
|
||
}
|
||
.ct .meta { font-size: 10px; color: var(--text-3); font-weight: 500; text-transform: none; letter-spacing: 0; }
|
||
|
||
/* SECTION */
|
||
.sect {
|
||
font-size: 10px; color: var(--text-3);
|
||
text-transform: uppercase; letter-spacing: 1.4px; font-weight: 700;
|
||
margin: 22px 0 10px;
|
||
display: flex; align-items: center; gap: 10px;
|
||
}
|
||
.sect::after { content: ''; flex: 1; height: 1px; background: var(--border); }
|
||
.sect:first-child { margin-top: 0; }
|
||
|
||
/* FILTER BAR */
|
||
.fbar {
|
||
background: var(--panel); border: 1px solid var(--border);
|
||
border-radius: var(--r); padding: 12px 14px;
|
||
margin-bottom: 14px;
|
||
}
|
||
.fbar-t {
|
||
font-size: 10px; color: var(--text-3);
|
||
text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700;
|
||
margin-bottom: 8px;
|
||
}
|
||
.fgrid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||
gap: 8px;
|
||
}
|
||
.fitem label {
|
||
display: block; font-size: 9px; color: var(--text-3);
|
||
text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 3px; font-weight: 700;
|
||
}
|
||
|
||
/* INPUTS */
|
||
.inp, select {
|
||
background: var(--bg-2); color: var(--text);
|
||
border: 1px solid var(--border);
|
||
padding: 8px 11px; border-radius: var(--r-sm);
|
||
font-size: 13px; outline: none; font-family: inherit;
|
||
width: 100%;
|
||
transition: 150ms;
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
}
|
||
select {
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B7A99' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
|
||
background-repeat: no-repeat;
|
||
background-position: right 12px center;
|
||
padding-right: 32px;
|
||
}
|
||
.inp:focus, select:focus { border-color: var(--accent); }
|
||
.inp.flex { flex: 1; min-width: 180px; }
|
||
|
||
.btn {
|
||
background: var(--accent); color: white; border: none;
|
||
padding: 9px 14px; border-radius: var(--r-sm);
|
||
font-size: 12.5px; font-weight: 600; cursor: pointer;
|
||
transition: 150ms; font-family: inherit;
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
}
|
||
.btn:hover { background: var(--accent-2); }
|
||
.btn.sec { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); }
|
||
.btn.sec:hover { border-color: var(--accent); }
|
||
.btn.warn { background: var(--warn); color: var(--bg); }
|
||
.btn.crit { background: var(--crit); }
|
||
.btn.sm { padding: 5px 10px; font-size: 11px; }
|
||
|
||
.toolbar { display: flex; gap: 8px; margin-bottom: 14px; align-items: center; flex-wrap: wrap; }
|
||
|
||
/* TABLES */
|
||
.tbl-wrap {
|
||
background: var(--panel); border: 1px solid var(--border);
|
||
border-radius: var(--r);
|
||
overflow: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
|
||
thead th {
|
||
background: var(--bg-3); color: var(--text-3);
|
||
padding: 10px 12px; text-align: left;
|
||
font-weight: 700; font-size: 9.5px;
|
||
text-transform: uppercase; letter-spacing: 1px;
|
||
cursor: pointer; user-select: none;
|
||
border-bottom: 1px solid var(--border);
|
||
white-space: nowrap;
|
||
position: sticky; top: 0; z-index: 5;
|
||
}
|
||
thead th:hover { color: var(--accent); background: var(--panel-2); }
|
||
thead th.sorted { color: var(--accent); }
|
||
thead th .arr { margin-left: 3px; opacity: 0.5; font-size: 9px; }
|
||
thead th.sorted .arr { opacity: 1; }
|
||
tbody tr {
|
||
border-bottom: 1px solid var(--border);
|
||
cursor: pointer; transition: 100ms;
|
||
}
|
||
tbody tr:hover { background: var(--panel-2); }
|
||
tbody tr:last-child { border-bottom: none; }
|
||
tbody td { padding: 10px 12px; }
|
||
tbody td.num { text-align: right; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
|
||
tbody td.dim { color: var(--text-3); }
|
||
|
||
/* BADGES */
|
||
.bdg {
|
||
display: inline-flex; align-items: center; gap: 4px;
|
||
padding: 2px 7px; border-radius: 4px;
|
||
font-size: 9.5px; font-weight: 700;
|
||
text-transform: uppercase; letter-spacing: 0.5px;
|
||
white-space: nowrap;
|
||
}
|
||
.bdg::before { content: ''; width: 4px; height: 4px; border-radius: 50%; }
|
||
.bdg.ok { background: rgba(45,212,191,0.13); color: var(--ok); }
|
||
.bdg.ok::before { background: var(--ok); }
|
||
.bdg.warn { background: rgba(245,158,11,0.13); color: var(--warn); }
|
||
.bdg.warn::before { background: var(--warn); }
|
||
.bdg.crit { background: rgba(239,68,68,0.13); color: var(--crit); }
|
||
.bdg.crit::before { background: var(--crit); }
|
||
.bdg.info { background: rgba(59,130,196,0.13); color: var(--accent); }
|
||
.bdg.info::before { background: var(--accent); }
|
||
.bdg.gold { background: rgba(245,158,11,0.13); color: var(--gold); }
|
||
.bdg.gold::before { background: var(--gold); }
|
||
.bdg.muted { background: rgba(107,122,153,0.13); color: var(--text-3); }
|
||
.bdg.muted::before { background: var(--text-3); }
|
||
|
||
/* BARS */
|
||
.bar { display: flex; align-items: center; padding: 5px 0; gap: 10px; font-size: 11.5px; }
|
||
.bar .l { width: 36%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
|
||
.bar .t { flex: 1; height: 6px; background: var(--bg-3); border-radius: 100px; overflow: hidden; }
|
||
.bar .f { height: 100%; background: linear-gradient(90deg, var(--accent), var(--gold)); border-radius: 100px; transition: width 500ms; }
|
||
.bar .f.ok { background: linear-gradient(90deg, var(--ok), var(--cyan)); }
|
||
.bar .f.warn { background: linear-gradient(90deg, var(--warn), #FB923C); }
|
||
.bar .f.crit { background: linear-gradient(90deg, var(--crit), #DC2626); }
|
||
.bar .f.gold { background: linear-gradient(90deg, var(--gold), #E5C064); }
|
||
.bar .v { width: 90px; text-align: right; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; }
|
||
|
||
/* DONUT */
|
||
.donut-w { display: flex; gap: 16px; align-items: center; }
|
||
.donut { width: 110px; height: 110px; position: relative; flex-shrink: 0; }
|
||
.donut svg { transform: rotate(-90deg); }
|
||
.donut-c { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; }
|
||
.donut-c .v { font-size: 20px; font-weight: 700; font-family: 'JetBrains Mono', monospace; line-height: 1; }
|
||
.donut-c .l { font-size: 9px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.7px; margin-top: 3px; }
|
||
.lg { font-size: 11px; flex: 1; }
|
||
.lg .it { display: flex; align-items: center; gap: 7px; padding: 4px 0; color: var(--text-2); }
|
||
.lg .it .sw { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
|
||
.lg .it .lname { flex: 1; }
|
||
.lg .it .lval { font-family: 'JetBrains Mono', monospace; color: var(--text); font-weight: 500; }
|
||
|
||
/* BANNER */
|
||
.ban {
|
||
padding: 10px 14px; border-radius: var(--r-sm);
|
||
margin-bottom: 12px; display: flex; gap: 10px;
|
||
align-items: center; font-size: 12.5px;
|
||
border: 1px solid;
|
||
}
|
||
.ban.crit { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.3); color: var(--crit); }
|
||
.ban.warn { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.3); color: var(--warn); }
|
||
.ban.info { background: rgba(59,130,196,0.08); border-color: rgba(59,130,196,0.3); color: var(--accent); }
|
||
.ban.ok { background: rgba(45,212,191,0.08); border-color: rgba(45,212,191,0.3); color: var(--ok); }
|
||
|
||
.empty { text-align: center; color: var(--text-3); padding: 40px 18px; font-size: 13px; }
|
||
.empty-i { font-size: 28px; margin-bottom: 8px; opacity: 0.5; }
|
||
.loader { color: var(--text-3); padding: 50px 20px; text-align: center; font-size: 13px; }
|
||
|
||
/* DRAWER */
|
||
.dr-bg {
|
||
position: fixed; inset: 0;
|
||
background: rgba(10,14,26,0.7);
|
||
backdrop-filter: blur(4px);
|
||
z-index: 90;
|
||
opacity: 0; pointer-events: none;
|
||
transition: 200ms;
|
||
}
|
||
.dr-bg.open { opacity: 1; pointer-events: auto; }
|
||
.drawer {
|
||
position: fixed; top: 0; right: 0;
|
||
width: min(680px, 100%); height: 100vh; height: 100dvh;
|
||
background: var(--bg-2); border-left: 1px solid var(--border);
|
||
overflow-y: auto;
|
||
transform: translateX(100%);
|
||
transition: transform 250ms cubic-bezier(0.4,0,0.2,1);
|
||
z-index: 100;
|
||
box-shadow: -16px 0 48px rgba(0,0,0,0.6);
|
||
}
|
||
.drawer.open { transform: translateX(0); }
|
||
.dr-h {
|
||
padding: 18px 22px; border-bottom: 1px solid var(--border);
|
||
display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
|
||
position: sticky; top: 0; background: var(--bg-2); z-index: 5;
|
||
}
|
||
.dr-h h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.2px; }
|
||
.dr-h .bc { font-size: 9px; color: var(--text-3); text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 3px; font-weight: 700; }
|
||
.dr-x {
|
||
background: var(--panel); border: 1px solid var(--border); color: var(--text-3);
|
||
cursor: pointer; width: 30px; height: 30px; border-radius: 8px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 14px; flex-shrink: 0; transition: 150ms;
|
||
}
|
||
.dr-x:hover { color: var(--text); border-color: var(--border-2); }
|
||
.dr-b { padding: 18px 22px 40px; }
|
||
.dr-b dl { display: grid; grid-template-columns: 130px 1fr; gap: 8px 14px; }
|
||
.dr-b dt { color: var(--text-3); font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 700; padding-top: 1px; }
|
||
.dr-b dd { color: var(--text); font-size: 13px; word-break: break-word; }
|
||
.dr-b dd a { color: var(--accent); text-decoration: none; }
|
||
.dr-b h4 {
|
||
font-size: 10px; color: var(--text-3);
|
||
text-transform: uppercase; letter-spacing: 1.3px; font-weight: 700;
|
||
margin: 22px 0 10px; padding-bottom: 8px;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.sub-tbl { width: 100%; font-size: 12px; }
|
||
.sub-tbl td { padding: 7px 10px; border-bottom: 1px solid var(--border); }
|
||
.sub-tbl thead th { padding: 8px 10px; }
|
||
|
||
.blur-tag {
|
||
display: inline-block; margin-left: 5px;
|
||
font-size: 9px; padding: 1px 5px; border-radius: 3px;
|
||
background: rgba(245,158,11,0.15); color: var(--warn);
|
||
text-transform: uppercase; letter-spacing: 0.4px; font-weight: 700;
|
||
}
|
||
|
||
/* MODAL */
|
||
.modal-bg {
|
||
position: fixed; inset: 0;
|
||
background: rgba(10,14,26,0.85);
|
||
backdrop-filter: blur(8px);
|
||
display: none;
|
||
align-items: center; justify-content: center;
|
||
z-index: 1000;
|
||
padding: 20px;
|
||
}
|
||
.modal-bg.show { display: flex; }
|
||
.modal {
|
||
background: var(--panel); border: 1px solid var(--border);
|
||
border-radius: var(--r);
|
||
padding: 22px;
|
||
width: 100%; max-width: 400px;
|
||
box-shadow: 0 20px 60px rgba(0,0,0,0.6);
|
||
}
|
||
.modal h3 { margin-bottom: 6px; font-size: 17px; }
|
||
.modal p { color: var(--text-3); font-size: 12px; margin-bottom: 14px; line-height: 1.55; }
|
||
.modal .inp { margin-bottom: 10px; }
|
||
.ma { display: flex; gap: 8px; }
|
||
.hint {
|
||
font-size: 11px; color: var(--text-3);
|
||
padding: 9px 11px; background: var(--bg-2); border-radius: 6px;
|
||
margin-top: 10px; line-height: 1.55; border: 1px solid var(--border);
|
||
}
|
||
.hint b { color: var(--gold); }
|
||
|
||
/* MOBILE NAV */
|
||
.mob-nav {
|
||
display: none;
|
||
position: fixed; bottom: 0; left: 0; right: 0;
|
||
background: var(--bg-2);
|
||
border-top: 1px solid var(--border);
|
||
padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
|
||
z-index: 50;
|
||
backdrop-filter: blur(12px);
|
||
}
|
||
.mob-nav-grid { display: grid; grid-template-columns: repeat(5, 1fr); }
|
||
.mob-nav-i {
|
||
display: flex; flex-direction: column; align-items: center; gap: 3px;
|
||
padding: 6px 4px;
|
||
color: var(--text-3);
|
||
cursor: pointer;
|
||
transition: 150ms;
|
||
}
|
||
.mob-nav-i.active { color: var(--accent); }
|
||
.mob-nav-i .ico { width: 20px; height: 20px; }
|
||
.mob-nav-i span { font-size: 9.5px; font-weight: 600; letter-spacing: 0.2px; }
|
||
|
||
/* MOBILE DRAWER NAV */
|
||
.mob-drawer {
|
||
position: fixed; top: 0; left: -300px; width: 280px; height: 100vh; height: 100dvh;
|
||
background: var(--bg-2); border-right: 1px solid var(--border);
|
||
transition: left 250ms; z-index: 200;
|
||
overflow-y: auto;
|
||
display: flex; flex-direction: column;
|
||
}
|
||
.mob-drawer.open { left: 0; }
|
||
|
||
.ico-svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
|
||
|
||
.footer { padding: 18px 20px; color: var(--text-3); font-size: 10px; text-align: center; border-top: 1px solid var(--border); margin-top: 24px; }
|
||
|
||
/* ===== RESPONSIVE ===== */
|
||
@media (max-width: 880px) {
|
||
.sidebar { display: none; }
|
||
.menu-btn { display: inline-flex; }
|
||
.g4 { grid-template-columns: repeat(2, 1fr); }
|
||
.g3 { grid-template-columns: repeat(2, 1fr); }
|
||
.g2 { grid-template-columns: 1fr; }
|
||
.topbar { padding: 11px 14px; }
|
||
.content { padding: 14px 14px 90px; }
|
||
.mob-nav { display: block; }
|
||
.stat-v { font-size: 22px; }
|
||
.stat-v.lg { font-size: 24px; }
|
||
.stat-v.sm { font-size: 16px; }
|
||
.card { padding: 12px 14px; }
|
||
.ct { font-size: 10.5px; }
|
||
.tb-title h2 { font-size: 16px; }
|
||
.tb-bc { font-size: 9px; }
|
||
.donut-w { flex-direction: column; align-items: stretch; }
|
||
.donut { margin: 0 auto; }
|
||
.dr-b dl { grid-template-columns: 110px 1fr; }
|
||
.modal-bg { align-items: flex-end; padding: 0; }
|
||
.modal { max-width: 100%; border-radius: var(--r) var(--r) 0 0; padding: 22px; padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
|
||
}
|
||
@media (max-width: 460px) {
|
||
.g4 { grid-template-columns: 1fr 1fr; }
|
||
.g3 { grid-template-columns: 1fr; }
|
||
.stat-v { font-size: 20px; }
|
||
.topbar { padding: 10px 12px; }
|
||
.content { padding: 12px 12px 90px; }
|
||
.fgrid { grid-template-columns: 1fr; }
|
||
table { font-size: 11.5px; }
|
||
tbody td, thead th { padding: 8px 10px; }
|
||
}
|
||
|
||
.klub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
|
||
.klub-card { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 16px; cursor: pointer; transition: 200ms; }
|
||
.klub-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
|
||
.klub-card.gold-border { border-color: var(--gold); }
|
||
.klub-card-head { display: flex; gap: 12px; margin-bottom: 12px; }
|
||
.klub-logo { width: 44px; height: 44px; border-radius: 9px; background: linear-gradient(135deg, var(--accent), var(--gold)); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--bg); font-size: 14px; flex-shrink: 0; }
|
||
.klub-info { flex: 1; min-width: 0; }
|
||
.klub-name { font-size: 14px; font-weight: 600; line-height: 1.3; }
|
||
.klub-savez { font-size: 11px; color: var(--text-dim); }
|
||
.klub-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
|
||
.klub-stats-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
|
||
.klub-stat-mini { text-align: center; }
|
||
.klub-stat-mini .v { font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 600; }
|
||
.klub-stat-mini .l { font-size: 9px; color: var(--text-dim); text-transform: uppercase; margin-top: 3px; }
|
||
.clan-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
|
||
.clan-card { background: var(--bg-3); border: 1px solid var(--border); border-radius: 8px; padding: 11px; }
|
||
.clan-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
|
||
.clan-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--panel-2); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; color: var(--accent); }
|
||
.clan-name-x { flex: 1; min-width: 0; }
|
||
.clan-name-x .nm { font-size: 12.5px; font-weight: 600; }
|
||
.clan-name-x .pos { font-size: 10px; color: var(--text-dim); }
|
||
.clan-flags { display: flex; gap: 4px; flex-wrap: wrap; }
|
||
.clan-flag { padding: 1px 5px; border-radius: 3px; font-size: 9px; font-weight: 700; }
|
||
.drawer-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
|
||
.drawer-stat { background: var(--bg-3); border: 1px solid var(--border); border-radius: 7px; padding: 10px; text-align: center; }
|
||
.drawer-stat .v { font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 600; }
|
||
.drawer-stat .l { font-size: 9px; color: var(--text-dim); text-transform: uppercase; margin-top: 4px; }
|
||
.drawer-stat.ok .v { color: var(--ok); }
|
||
.drawer-stat.warn .v { color: var(--warn); }
|
||
.drawer-stat.crit .v { color: var(--crit); }
|
||
.drawer-stat.accent .v { color: var(--accent); }
|
||
.view-toggle { display: inline-flex; gap: 3px; background: var(--bg-2); padding: 3px; border-radius: 7px; border: 1px solid var(--border); }
|
||
.view-toggle button { background: none; border: none; color: var(--text-dim); padding: 5px 10px; font-size: 11px; font-weight: 600; cursor: pointer; border-radius: 5px; font-family: inherit; }
|
||
.view-toggle button.active { background: var(--accent); color: white; }
|
||
@media (max-width: 700px) {
|
||
.klub-grid { grid-template-columns: 1fr; }
|
||
.clan-list { grid-template-columns: 1fr; }
|
||
.drawer-stats-grid { grid-template-columns: repeat(2, 1fr); }
|
||
}
|
||
|
||
|
||
.ekosustav-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
|
||
.ekosustav-coverage-row { font-size: 11px !important; }
|
||
.ekosustav-coverage-row > div:first-child { width: 100px !important; }
|
||
}
|
||
|
||
|
||
/* ===== TOPBAR — 2-row grid layout, mobile-first ===== */
|
||
.topbar { display: flex !important; flex-direction: column; gap: 8px; padding: 10px 14px; min-width: 0; }
|
||
.tb-row { display: flex; align-items: center; gap: 10px; min-width: 0; width: 100%; }
|
||
.tb-row-1 { gap: 12px; }
|
||
.tb-row-2 { padding: 0; }
|
||
.tb-title { flex: 1; min-width: 0; overflow: hidden; }
|
||
.tb-title h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.tb-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-dim); white-space: nowrap; flex-shrink: 0; }
|
||
|
||
.tb-search {
|
||
display: flex; align-items: center; gap: 6px; flex: 1; width: 100%;
|
||
background: rgba(255,255,255,0.05); border: 1px solid var(--border);
|
||
border-radius: 8px; padding: 0 10px; height: 36px; position: relative;
|
||
transition: border-color 150ms;
|
||
}
|
||
.tb-search:focus-within { border-color: var(--accent); background: rgba(59,130,196,0.08); }
|
||
.tb-search input {
|
||
flex: 1; min-width: 0; background: transparent; border: 0;
|
||
color: var(--text); font-size: 13px; outline: none; padding: 0 4px; height: 100%;
|
||
}
|
||
.tb-search input::placeholder { color: var(--text-dim); }
|
||
.topbar-go {
|
||
background: var(--accent); color: white; border: 0; border-radius: 5px;
|
||
width: 28px; height: 26px; font-size: 14px; cursor: pointer; line-height: 1;
|
||
flex-shrink: 0;
|
||
}
|
||
.topbar-go:hover { opacity: 0.85; }
|
||
|
||
.top-search-suggest {
|
||
position: absolute; top: calc(100% + 4px); left: 0; right: 0;
|
||
background: var(--panel); border: 1px solid var(--border);
|
||
border-radius: 8px; max-height: 360px; overflow-y: auto;
|
||
z-index: 200; display: none; box-shadow: 0 8px 24px rgba(0,0,0,0.4);
|
||
}
|
||
.top-search-suggest.show { display: block; }
|
||
.tss-item { padding: 10px 12px; cursor: pointer; border-bottom: 1px solid var(--border); font-size: 13px; line-height: 1.4; }
|
||
.tss-item:last-child { border-bottom: 0; }
|
||
.tss-item:hover { background: rgba(59,130,196,0.08); }
|
||
.tss-tip {
|
||
display: inline-block; font-size: 9px; color: var(--accent);
|
||
text-transform: uppercase; letter-spacing: 0.5px; margin-right: 8px;
|
||
padding: 2px 5px; background: rgba(59,130,196,0.1); border-radius: 3px;
|
||
}
|
||
|
||
/* Desktop: single row layout */
|
||
@media (min-width: 881px) {
|
||
.topbar { flex-direction: row; align-items: center; gap: 14px; padding: 11px 18px; }
|
||
.tb-row-1 { flex: 0 0 auto; gap: 12px; flex: 1; max-width: 50%; }
|
||
.tb-row-2 { flex: 1; max-width: 480px; padding: 0; }
|
||
.tb-search { max-width: 480px; }
|
||
}
|
||
|
||
/* Mobile: row-2 search full width below row-1 */
|
||
@media (max-width: 880px) {
|
||
.tb-meta { font-size: 10px; }
|
||
.tb-time { display: none; }
|
||
.tb-search { height: 34px; }
|
||
.tb-search input { font-size: 13px; }
|
||
.ekosustav-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
|
||
.ekosustav-coverage-row { font-size: 11px !important; }
|
||
.ekosustav-coverage-row > div:first-child { width: 110px !important; flex-shrink: 0; }
|
||
}
|
||
|
||
|
||
/* ===== V6 PRO FORM (Navision/SAP-style) ===== */
|
||
.v6-form { background:#1a1a1a; border:1px solid #2a2a2a; border-radius:6px; overflow:hidden; }
|
||
.v6-fh { background:linear-gradient(180deg,#2a3a52 0%,#1e2a3e 100%); border-bottom:1px solid #3a4a6a; padding:10px 16px; display:flex; justify-content:space-between; align-items:center; }
|
||
.v6-fh h3 { margin:0; font-size:14px; color:#fff; font-weight:600; }
|
||
.v6-fs { padding:12px 16px; border-bottom:1px solid #2a2a2a; }
|
||
.v6-fs-t { font-size:11px; color:#5e72e4; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; font-weight:600; }
|
||
.v6-g2 { display:grid; grid-template-columns:repeat(2,1fr); gap:8px 16px; }
|
||
.v6-g3 { display:grid; grid-template-columns:repeat(3,1fr); gap:8px 14px; }
|
||
.v6-g4 { display:grid; grid-template-columns:repeat(4,1fr); gap:8px 12px; }
|
||
@media (max-width:700px) { .v6-g2,.v6-g3,.v6-g4 { grid-template-columns:1fr; } }
|
||
.v6-fld { display:flex; flex-direction:column; }
|
||
.v6-w2 { grid-column:span 2; }
|
||
.v6-fld-w { grid-column:1/-1; }
|
||
.v6-lbl { font-size:11px; color:#98a8b8; margin-bottom:3px; font-weight:500; }
|
||
.v6-lbl.req::after { content:' *'; color:#e74c3c; }
|
||
.v6-inp { background:#0f1620; border:1px solid #2a3a4a; color:#e6e8ec; padding:6px 8px; font-size:13px; border-radius:3px; outline:none; font-family:inherit; }
|
||
.v6-inp:focus { border-color:#5e72e4; }
|
||
.v6-inp[readonly] { background:#1a242e; color:#788798; }
|
||
.v6-num { text-align:right; font-family:Consolas,monospace; }
|
||
.v6-calc { background:#1a2a1f !important; color:#4caf50 !important; font-weight:600; }
|
||
.v6-tot { background:linear-gradient(180deg,#1a2a1f 0%,#1e2a24 100%); padding:10px 16px; border-top:2px solid #4caf50; display:flex; justify-content:flex-end; gap:24px; }
|
||
.v6-tot-i { text-align:right; }
|
||
.v6-tot-i .v6-lbl { font-size:10px; }
|
||
.v6-tot-i .v6-val { font-size:18px; font-weight:700; color:#4caf50; font-family:Consolas,monospace; }
|
||
.v6-ac { position:relative; }
|
||
.v6-ac-s { position:absolute; top:100%; left:0; right:0; background:#0f1620; border:1px solid #5e72e4; border-top:none; max-height:200px; overflow-y:auto; z-index:100; display:none; }
|
||
.v6-ac-s.show { display:block; }
|
||
.v6-ac-s div { padding:6px 10px; cursor:pointer; font-size:13px; border-bottom:1px solid #2a2a2a; }
|
||
.v6-ac-s div:hover { background:#2a3a52; color:#fff; }
|
||
.v6-pill { display:inline-block; padding:2px 6px; background:#1a3a52; color:#5e72e4; font-size:10px; border-radius:3px; margin-left:6px; }
|
||
.v6-att-z { border:2px dashed #3a4a6a; border-radius:4px; padding:14px; text-align:center; cursor:pointer; background:#0f1620; }
|
||
.v6-att-z:hover { border-color:#5e72e4; }
|
||
.v6-att-l { margin-top:8px; display:flex; flex-direction:column; gap:4px; }
|
||
.v6-att-i { display:flex; align-items:center; gap:8px; padding:6px 10px; background:#1a2a3a; border-radius:3px; font-size:12px; }
|
||
.v6-att-i .v6-tag { background:#2a5e3a; color:#fff; padding:1px 6px; border-radius:2px; font-size:10px; }
|
||
.v6-att-i .v6-amt { margin-left:auto; font-family:Consolas,monospace; color:#4caf50; }
|
||
|
||
|
||
/* ===== V6.2 VOICE INPUT + CHATBOT ===== */
|
||
.v6-mic-btn {
|
||
background: #2a3a52;
|
||
border: 1px solid #3a4a6a;
|
||
color: #e6e8ec;
|
||
padding: 0 12px;
|
||
border-radius: 3px;
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
height: 100%;
|
||
transition: all 0.2s;
|
||
}
|
||
.v6-mic-btn:hover { background: #5e72e4; }
|
||
.v6-mic-btn.recording {
|
||
background: #c0392b;
|
||
border-color: #e74c3c;
|
||
animation: v6pulse 1.2s infinite;
|
||
}
|
||
@keyframes v6pulse {
|
||
0%, 100% { box-shadow: 0 0 0 0 rgba(231,76,60,0.7); }
|
||
50% { box-shadow: 0 0 0 8px rgba(231,76,60,0); }
|
||
}
|
||
.v6-chat-thread {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
padding: 12px;
|
||
max-height: 60vh;
|
||
overflow-y: auto;
|
||
background: #0f1620;
|
||
border-radius: 6px;
|
||
margin-bottom: 12px;
|
||
}
|
||
.v6-chat-msg {
|
||
padding: 10px 14px;
|
||
border-radius: 12px;
|
||
max-width: 85%;
|
||
font-size: 13px;
|
||
line-height: 1.5;
|
||
word-wrap: break-word;
|
||
}
|
||
.v6-chat-msg.user {
|
||
background: #5e72e4;
|
||
color: #fff;
|
||
align-self: flex-end;
|
||
border-bottom-right-radius: 3px;
|
||
}
|
||
.v6-chat-msg.bot {
|
||
background: #1a2a3a;
|
||
color: #e6e8ec;
|
||
align-self: flex-start;
|
||
border-bottom-left-radius: 3px;
|
||
white-space: pre-wrap;
|
||
}
|
||
.v6-chat-msg.bot .v6-msg-meta {
|
||
font-size: 10px;
|
||
color: #788798;
|
||
margin-bottom: 4px;
|
||
}
|
||
.v6-chat-msg .v6-src-link {
|
||
display: inline-block;
|
||
background: #2a5e3a;
|
||
color: #fff;
|
||
padding: 2px 6px;
|
||
border-radius: 3px;
|
||
font-size: 10px;
|
||
margin: 2px 4px 2px 0;
|
||
cursor: pointer;
|
||
text-decoration: none;
|
||
}
|
||
.v6-chat-msg .v6-src-link:hover { background: #3a7e4a; }
|
||
.v6-chat-typing {
|
||
display: inline-block;
|
||
padding: 8px 14px;
|
||
background: #1a2a3a;
|
||
border-radius: 12px;
|
||
border-bottom-left-radius: 3px;
|
||
}
|
||
.v6-chat-typing span {
|
||
display: inline-block;
|
||
width: 8px;
|
||
height: 8px;
|
||
margin: 0 2px;
|
||
background: #5e72e4;
|
||
border-radius: 50%;
|
||
animation: v6typing 1.4s infinite;
|
||
}
|
||
.v6-chat-typing span:nth-child(2) { animation-delay: 0.2s; }
|
||
.v6-chat-typing span:nth-child(3) { animation-delay: 0.4s; }
|
||
@keyframes v6typing {
|
||
0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
|
||
30% { opacity: 1; transform: translateY(-4px); }
|
||
}
|
||
.v6-input-row {
|
||
display: flex;
|
||
gap: 8px;
|
||
align-items: stretch;
|
||
}
|
||
.v6-input-row .inp { flex: 1; }
|
||
|
||
.nav-sec { margin-top: 8px; }
|
||
.nav-sec .sec-title { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 11px; letter-spacing: 1px; color: var(--text3); padding: 6px 12px; background: var(--bg3); border-radius: 4px; cursor: pointer; user-select: none; }
|
||
.nav-sec .sec-title .arrow { transition: transform 0.2s; }
|
||
.nav-sec .sec-items { display: none; margin-top: 4px; }
|
||
.nav-sec.open .sec-items { display: block; }
|
||
|
||
/* EXPANDABLE MENU */
|
||
.nav-sec { margin-top: 8px; }
|
||
.nav-sec .sec-title { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 11px; letter-spacing: 1px; color: var(--text3); padding: 6px 12px; background: var(--bg3); border-radius: 4px; cursor: pointer; user-select: none; }
|
||
.nav-sec .sec-title .arrow { transition: transform 0.2s; }
|
||
.nav-sec .sec-items { display: none; margin-top: 4px; }
|
||
.nav-sec.open .sec-items { display: block; }
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="app">
|
||
<!-- DESKTOP SIDEBAR -->
|
||
<aside class="sidebar">
|
||
<div class="sb-head">
|
||
<div class="brand">
|
||
<div class="brand-mark">PG</div>
|
||
<div class="brand-text">
|
||
<h1>PGŽ Sport</h1>
|
||
<p>Civic Intelligence OS</p>
|
||
</div>
|
||
</div>
|
||
<div id="role-pill" class="role-pill viewer" onclick="showLogin()">VIEWER</div>
|
||
</div>
|
||
<nav class="nav" id="nav-desktop"></nav>
|
||
<div class="sb-foot">
|
||
<div><b style="color:var(--gold)">Ri.NET</b> · DABI Digital B.V.</div>
|
||
<div>Damir Radulić · 2026</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- MAIN -->
|
||
<main class="main">
|
||
<div id="topbar"></div>
|
||
<div class="content"><div class="inner" id="content"><div class="loader">Učitavanje…</div></div></div>
|
||
</main>
|
||
</div>
|
||
|
||
<!-- MOBILE BOTTOM NAV -->
|
||
<nav class="mob-nav" id="mob-nav"></nav>
|
||
|
||
<!-- MOBILE SIDE DRAWER -->
|
||
<div class="dr-bg" id="mob-drawer-bg" onclick="toggleMobDrawer(false)"></div>
|
||
<aside class="mob-drawer" id="mob-drawer">
|
||
<div class="sb-head">
|
||
<div class="brand">
|
||
<div class="brand-mark">PG</div>
|
||
<div class="brand-text"><h1>PGŽ Sport</h1><p>Civic Intelligence OS</p></div>
|
||
</div>
|
||
<div id="role-pill-mob" class="role-pill viewer" onclick="showLogin()">VIEWER</div>
|
||
</div>
|
||
<nav class="nav" id="nav-mob"></nav>
|
||
<div class="sb-foot">
|
||
<div><b style="color:var(--gold)">Ri.NET</b> · DABI Digital</div>
|
||
<div>Damir Radulić</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- DETAIL DRAWER -->
|
||
<div class="dr-bg" id="drawer-bg" onclick="closeDrawer()"></div>
|
||
<div class="drawer" id="drawer"><div id="drawer-content"></div></div>
|
||
|
||
<!-- LOGIN MODAL — v2 (email+password + admin tab) -->
|
||
<div class="modal-bg" id="login-modal">
|
||
<div class="modal" style="min-width:340px;max-width:420px">
|
||
<div style="display:flex;gap:6px;margin-bottom:14px;border-bottom:1px solid var(--border);padding-bottom:10px">
|
||
<button id="loginTabUser" class="btn" style="flex:1;font-size:12px" onclick="loginSwitchTab('user')">👤 Korisnik</button>
|
||
<button id="loginTabAdmin" class="btn sec" style="flex:1;font-size:12px" onclick="loginSwitchTab('admin')">🔓 Admin token</button>
|
||
</div>
|
||
<div id="loginPanelUser">
|
||
<h3 style="margin-bottom:6px">Prijava korisnika</h3>
|
||
<p class="muted" style="margin-bottom:12px">Email i lozinka. Default lozinka novim korisnicima: <span class="mono">PgzSport2026!</span> (mora se promijeniti)</p>
|
||
<input class="inp" id="loginEmail" type="email" placeholder="email@pgz.hr" autocomplete="username" style="margin-bottom:8px;width:100%">
|
||
<input class="inp" id="loginPwd" type="password" placeholder="Lozinka" autocomplete="current-password" style="margin-bottom:12px;width:100%" onkeydown="if(event.key==='Enter')doUserLogin()">
|
||
<div id="loginError" style="display:none;color:var(--red);font-size:11px;margin-bottom:8px;padding:6px 10px;background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.3);border-radius:4px"></div>
|
||
<div class="ma">
|
||
<button class="btn" style="flex:1" onclick="doUserLogin()">Prijavi se</button>
|
||
<button class="btn sec" onclick="closeLogin()">Odustani</button>
|
||
</div>
|
||
</div>
|
||
<div id="loginPanelAdmin" style="display:none">
|
||
<h3 style="margin-bottom:6px">Admin token</h3>
|
||
<p class="muted" style="margin-bottom:12px">Za PII unmask (OIB, IBAN, telefon). <b>GDPR čl. 5 i 32.</b></p>
|
||
<input class="inp mono" id="token-input" placeholder="Admin token..." autocomplete="off" style="margin-bottom:12px;width:100%">
|
||
<div class="ma">
|
||
<button class="btn" style="flex:1" onclick="doLogin()">Aktiviraj</button>
|
||
<button class="btn sec" onclick="closeLogin()">Odustani</button>
|
||
</div>
|
||
<div class="hint" style="margin-top:10px"><b>Demo:</b> <span class="mono">admin-pgz-2026</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MUST CHANGE PASSWORD MODAL -->
|
||
<div class="modal-bg" id="pwd-change-modal">
|
||
<div class="modal" style="min-width:340px;max-width:420px">
|
||
<h3>🔒 Promjena lozinke</h3>
|
||
<p class="muted" style="margin-bottom:12px">Vaša početna lozinka mora se promijeniti prije pristupa sustavu.</p>
|
||
<input class="inp" id="pwdNew1" type="password" placeholder="Nova lozinka (min 8 znakova)" autocomplete="new-password" style="margin-bottom:8px;width:100%">
|
||
<input class="inp" id="pwdNew2" type="password" placeholder="Potvrdi novu lozinku" autocomplete="new-password" style="margin-bottom:12px;width:100%" onkeydown="if(event.key==='Enter')doPwdChange()">
|
||
<div id="pwdError" style="display:none;color:var(--red);font-size:11px;margin-bottom:8px"></div>
|
||
<div class="ma">
|
||
<button class="btn" style="flex:1" onclick="doPwdChange()">Promijeni i nastavi</button>
|
||
<button class="btn sec" onclick="doLogout()">Odjavi se</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
const API = '/sport';
|
||
let state = { sort:{}, page:'dashboard', token: localStorage.getItem('pgz_token')||'', filters:{}, isAdmin:false };
|
||
|
||
const fmt = n => n==null||n===''?'–':Number(n).toLocaleString('hr-HR',{maximumFractionDigits:0});
|
||
const fmtEur = n => n==null||n===''?'–':Number(n).toLocaleString('hr-HR',{style:'currency',currency:'EUR',maximumFractionDigits:0});
|
||
const fmtDate = d => d?new Date(d).toLocaleDateString('hr-HR'):'–';
|
||
const debounce = (fn,ms=300) => { let t; return (...a) => { clearTimeout(t); t=setTimeout(()=>fn(...a),ms); }; };
|
||
|
||
async function api(path, opts={}) {
|
||
const headers = { 'Content-Type':'application/json' };
|
||
if (state.token) headers['Authorization'] = 'Bearer '+state.token;
|
||
const res = await fetch(API+path, {...opts, headers:{...headers, ...(opts.headers||{})}});
|
||
if (!res.ok) throw new Error(`API ${res.status}`);
|
||
return res.json();
|
||
}
|
||
|
||
// === NAV CONFIG ===
|
||
const NAV = [
|
||
{ sec: "📊 PREGLED", items: [{id:"dashboard",label:"Dashboard",mlabel:"Početna",svg:"<rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/><line x1=\"3\" y1=\"9\" x2=\"21\" y2=\"9\"/><line x1=\"3\" y1=\"15\" x2=\"21\" y2=\"15\"/><line x1=\"9\" y1=\"21\" x2=\"9\" y2=\"9\"/>"}] },
|
||
{ sec: "🏛️ ORGANIZACIJA", items: [
|
||
{id:"savezi",label:"Savezi",svg:"<circle cx=\"12\" cy=\"8\" r=\"4\"/><path d=\"M5 20v-2a4 4 0 0 1 4-4h6a4 4 0 0 1 4 4v2\"/>"},
|
||
{id:"klubovi",label:"Klubovi",svg:"<rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/><circle cx=\"9\" cy=\"9\" r=\"2\"/><circle cx=\"15\" cy=\"9\" r=\"2\"/><circle cx=\"9\" cy=\"15\" r=\"2\"/><circle cx=\"15\" cy=\"15\" r=\"2\"/>"},
|
||
{id:"funkcionari",label:"Funkcionari",svg:"<path d=\"M12 2a5 5 0 1 0 0 10 5 5 0 0 0 0-10z\"/><path d=\"M4 20v-2a6 6 0 0 1 12 0v2\"/>"},
|
||
{id:"sportasi",label:"Igrači · Foto",mlabel:"Igrači",svg:"<circle cx=\"12\" cy=\"7\" r=\"4\"/><path d=\"M5 21v-2a4 4 0 0 1 4-4h6a4 4 0 0 1 4 4v2\"/>"}
|
||
]},
|
||
{ sec: "💰 FINANCIJE", items: [
|
||
{id:"clanarine",label:"Članarine",svg:"<rect x=\"2\" y=\"7\" width=\"20\" height=\"14\" rx=\"2\"/><path d=\"M16 3v4M8 3v4\"/>"},
|
||
{id:"potpore",label:"Potpore",svg:"<path d=\"M12 2v20M17 7l-5-5-5 5M7 17l5 5 5-5\"/>"},
|
||
{id:"proracun",label:"Proračun PGŽ",svg:"<rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"/>"}
|
||
]},
|
||
{ sec: "🏥 ZDRAVLJE", items: [
|
||
{id:"lijecnicki",label:"Liječnički pregledi",svg:"<path d=\"M22 12h-4l-3 9-4-18-3 9H2\"/>"},
|
||
{id:"zzjz",label:"ZZJZ PGŽ",svg:"<circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 8v8M8 12h8\"/>"}
|
||
]},
|
||
{ sec: "⚽ OPERATIVA", items: [
|
||
{id:"manifestacije",label:"Manifestacije",svg:"<polygon points=\"12 2 15 9 22 9 16 14 18 21 12 17 6 21 8 14 2 9 9 9 12 2\"/>"},
|
||
{id:"sportStats",label:"Sport Stats",svg:"<rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/><line x1=\"3\" y1=\"9\" x2=\"21\" y2=\"9\"/><line x1=\"3\" y1=\"15\" x2=\"21\" y2=\"15\"/><line x1=\"9\" y1=\"3\" x2=\"9\" y2=\"21\"/><line x1=\"15\" y1=\"3\" x2=\"15\" y2=\"21\"/>"}
|
||
]},
|
||
{ sec: "⚖️ ERP I PRAVO", items: [
|
||
{id:"ask",label:"AI Assistant",svg:"<path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"/><path d=\"M8 10h.01M12 10h.01M16 10h.01\"/>"},
|
||
{id:"invoices",label:"Računi (ERP)",svg:"<rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"2\"/><line x1=\"8\" y1=\"10\" x2=\"16\" y2=\"10\"/><line x1=\"8\" y1=\"14\" x2=\"12\" y2=\"14\"/>"},
|
||
{id:"forms",label:"Obrasci",svg:"<rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/><line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"9\"/><line x1=\"9\" y1=\"13\" x2=\"15\" y2=\"13\"/><line x1=\"9\" y1=\"17\" x2=\"13\" y2=\"17\"/>"},
|
||
{id:"users",label:"Korisnici",svg:"<path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"/><circle cx=\"12\" cy=\"7\" r=\"4\"/>"}
|
||
]}
|
||
];
|
||
const MOB_NAV = ["dashboard","savezi","klubovi","sportasi","ask"];
|