tacilytics 0.0.0-stage → 2.0.2

package/public/style.css

@@ -0,0 +1,415 @@
+/* Inter (SIL OFL 1.1, see assets/fonts/Inter-OFL.txt) — self-hosted, no third-party requests */
+@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('/assets/fonts/inter-latin-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
+@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('/assets/fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
+
+/* Tacilytics — calm, professional dark theme (14.10.2026). One accent, no glow, numbers first. */
+:root {
+  --accent: #5b8def;
+  --accent-2: #34d399;
+  --accent-soft: rgba(91, 141, 239, 0.14);
+  --accent-line: rgba(91, 141, 239, 0.45);
+  --green: #34d399;
+  --red: #f87171;
+  --yellow: #fbbf24;
+  --bg: #0f1115;
+  --bg2: #14161c;
+  --surface: #171a21;
+  --surface-2: #1d2129;
+  --line: #262b35;
+  --line-strong: #323946;
+  --text: #e6e8ec;
+  --text-dim: #8b93a3;
+  --text-faint: #5f6675;
+  /* legacy names, mapped so older rules keep rendering in the new palette */
+  --pink: var(--accent); --purple: var(--accent); --violet: var(--accent); --magenta: var(--accent); --cyan: #8fb3f5;
+  --glass: var(--surface); --glass-border: var(--line);
+  --glow-pink: transparent; --glow-purple: transparent;
+  --grad: var(--accent);
+  --grad-text: none;
+  --radius: 12px;
+  --radius-sm: 8px;
+  --radius-lg: 14px;
+  /* chart colours read by app.js */
+  --chart-visitors: #5b8def;
+  --chart-pageviews: #8b93a3;
+}
+*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
+html { scroll-behavior: smooth; }
+body {
+  font-family: 'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-feature-settings: 'cv11', 'ss01', 'tnum';
+  background: var(--bg); color: var(--text); line-height: 1.5; overflow-x: hidden; min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
+}
+a { color: var(--accent); text-decoration: none; }
+a:hover { text-decoration: underline; }
+:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+
+.container { max-width: 1140px; margin: 0 auto; padding: 22px; }
+.grad-text { color: var(--text); }
+
+/* ── Header ── */
+header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 6px 0 18px; border-bottom: 1px solid var(--line); margin-bottom: 22px; flex-wrap: wrap; }
+.brand { display: flex; align-items: center; gap: 13px; }
+.brand .logo { width: 34px; height: 34px; border-radius: 9px; }
+
+.brand h1 { font-size: 1.15rem; font-weight: 650; letter-spacing: -.01em; line-height: 1.1; }
+.brand .subtitle { font-size: 0.74rem; color: var(--text-dim); margin-top: 2px; }
+.header-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+
+.btn { border: 1px solid var(--accent); cursor: pointer; font-weight: 600; border-radius: var(--radius-sm); padding: 8px 14px; font-size: 0.84rem; font-family: inherit; transition: background .15s, border-color .15s; color: #fff; background: var(--accent); }
+.btn:hover { background: #4a7de0; border-color: #4a7de0; }
+.btn.ghost { background: var(--surface); border: 1px solid var(--line); color: var(--text); }
+.btn.ghost:hover { background: var(--surface-2); border-color: var(--line-strong); }
+.btn.danger:hover { border-color: var(--red); color: var(--red); background: rgba(248,113,113,.06); }
+
+select, input { background: var(--surface); border: 1px solid var(--line); color: var(--text); padding: 8px 12px; border-radius: var(--radius-sm); font-size: 0.84rem; font-family: inherit; outline: none; transition: border .15s; }
+select:focus, input:focus { border-color: var(--accent-line); }
+.realtime { display: flex; align-items: center; gap: 7px; font-size: 0.8rem; color: var(--text-dim); padding: 6px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; }
+.realtime .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }
+@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
+
+/* ── toolbar ── */
+.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
+.periods { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 3px; gap: 2px; }
+.periods button { background: transparent; border: none; color: var(--text-dim); padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 0.8rem; font-weight: 550; font-family: inherit; transition: background .15s, color .15s; }
+.periods button.active { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
+.periods button:hover:not(.active) { color: var(--text); }
+
+/* ── toolbar right (range + actions) ── */
+.toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.range { display: inline-flex; align-items: center; gap: 6px; }
+.range input[type=date] { padding: 8px 10px; font-size: 0.8rem; color-scheme: dark; }
+.range .arrow { color: var(--text-dim); }
+
+/* ── segmentation filter chips ── */
+.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; }
+.filters .flabel { font-size: 0.74rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; }
+.chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 550; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--text); }
+.chip .k { color: var(--text-dim); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; }
+.chip button { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; transition: color .2s; }
+.chip button:hover { color: var(--pink); }
+.chip.clear { background: transparent; border-color: transparent; color: var(--text-dim); cursor: pointer; }
+.chip.clear:hover { color: var(--pink); }
+
+/* ── panel header tabs ── */
+.panel h3 .tabs { margin-left: auto; display: inline-flex; gap: 2px; background: var(--bg2); border: 1px solid var(--line); border-radius: 7px; padding: 2px; }
+.panel h3 .tabs button { background: transparent; border: none; color: var(--text-dim); padding: 3px 9px; border-radius: 5px; cursor: pointer; font-size: 0.72rem; font-weight: 550; font-family: inherit; transition: all .15s; }
+.panel h3 .tabs button.active { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
+
+/* ── glass cards ── */
+.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; position: relative; overflow: hidden; }
+.card:hover { border-color: var(--line-strong); }
+.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 18px; }
+.stat .label { font-size: 0.74rem; color: var(--text-dim); font-weight: 550; margin-bottom: 6px; }
+.stat .value { font-size: 1.75rem; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
+.trend { font-size: 0.74rem; font-weight: 700; margin-top: 6px; display: inline-block; }
+.trend.up { color: var(--green); }
+.trend.down { color: var(--red); }
+
+/* ── chart ── */
+.chart-card { padding: 22px; margin-bottom: 18px; }
+.chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
+.chart-head strong { font-size: 0.92rem; font-weight: 600; }
+.chart-head .legend { display: flex; gap: 14px; font-size: 0.78rem; color: var(--text-dim); }
+.chart-head .legend span { display: inline-flex; align-items: center; gap: 6px; }
+.chart-head .legend .leg { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 3px 8px; border-radius: 8px; font: inherit; color: var(--text-dim); cursor: pointer; transition: background .15s, opacity .15s; }
+.chart-head .legend .leg:hover { background: rgba(255,255,255,.06); }
+.chart-head .legend .leg[aria-pressed="false"] { opacity: .38; text-decoration: line-through; }
+.chart-head .legend .leg[aria-pressed="false"] .swatch { background: var(--text-dim) !important; }
+.swatch { width: 10px; height: 10px; border-radius: 3px; }
+#chart { width: 100%; height: 220px; display: block; }
+.tip { position: fixed; pointer-events: none; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 8px; padding: 7px 10px; font-size: 0.78rem; opacity: 0; transition: opacity .12s; z-index: 50; white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
+
+/* ── panels ── */
+.panels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
+.panel h3 { font-size: 0.86rem; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text); }
+.panel h3 .em { font-size: .95rem; filter: grayscale(1); opacity: .7; }
+.bars { display: flex; flex-direction: column; gap: 3px; }
+.bar { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; border-radius: 6px; font-size: 0.84rem; overflow: hidden; }
+.bar .fill { position: absolute; inset: 0 auto 0 0; background: var(--accent-soft); border-radius: 6px; z-index: 0; transition: width .4s cubic-bezier(.4,0,.2,1); }
+.bar .name { position: relative; z-index: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 76%; }
+.bar .val { position: relative; z-index: 1; color: var(--text-dim); font-variant-numeric: tabular-nums; font-weight: 600; }
+.bar:hover .fill { background: rgba(91,141,239,.22); }
+.bar.clickable { cursor: pointer; }
+.bar.clickable:hover { box-shadow: inset 0 0 0 1px var(--accent-line); }
+.bar .cr { position: relative; z-index: 1; color: var(--accent); font-size: 0.74rem; font-weight: 600; margin-left: 8px; font-variant-numeric: tabular-nums; }
+.empty { color: var(--text-dim); font-size: 0.85rem; text-align: center; padding: 26px 0; }
+
+/* ── modals ── */
+.modal-overlay { position: fixed; inset: 0; background: rgba(5,6,9,.66); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: fadeIn .2s ease; padding: 20px; }
+@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+.modal { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); padding: 32px 30px; width: 100%; max-width: 420px; text-align: center; position: relative; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,.5); animation: slideUp .25s cubic-bezier(.16,1,.3,1); }
+
+@keyframes slideUp { from { transform: translateY(20px) scale(.97); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
+.modal .logo { width: 48px; height: 48px; margin: 0 auto 14px; display: block; border-radius: 12px; }
+.modal .logo.em { font-size: 2rem; width: auto; height: auto; filter: grayscale(1); opacity: .75; }
+.modal h2 { font-size: 1.2rem; font-weight: 650; margin-bottom: 6px; }
+.modal p { color: var(--text-dim); font-size: 0.88rem; margin-bottom: 22px; }
+.modal input { width: 100%; margin-bottom: 14px; text-align: center; }
+.modal .btn { width: 100%; padding: 13px; }
+.err { color: var(--red); font-size: 0.82rem; min-height: 18px; margin-bottom: 8px; }
+.snippet { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; font-family: ui-monospace, 'JetBrains Mono', Menlo, monospace; font-size: 0.76rem; color: #c9d4e8; text-align: left; word-break: break-all; margin: 12px 0; line-height: 1.55; }
+/* ── live visitors modal ── */
+.modal.live { max-width: 600px; text-align: left; }
+.live-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.live-head h2 { margin: 0; }
+.live-sub { color: var(--text-dim); font-size: 0.82rem; margin: 6px 0 16px; }
+#live-spark { width: 100%; height: 70px; display: block; margin-bottom: 18px; }
+.feed-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); margin-bottom: 8px; }
+.feed { max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
+.feed-row { display: flex; align-items: center; gap: 12px; padding: 9px 11px; border-radius: 10px; transition: background .2s; }
+.feed-row:hover { background: var(--surface-2); }
+.feed-row .fl { font-size: 1.1rem; flex-shrink: 0; }
+.feed-row .fw { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.feed-row .path { font-weight: 600; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.feed-row .goal { font-weight: 600; font-size: 0.86rem; color: var(--accent); }
+.feed-row .fm { font-size: 0.74rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.feed-row .ft { font-size: 0.74rem; color: var(--text-dim); flex-shrink: 0; font-variant-numeric: tabular-nums; }
+.feed::-webkit-scrollbar { width: 6px; }
+.feed::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
+
+.hide { display: none !important; }
+
+@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } .panels { grid-template-columns: 1fr; } }
+
+/* ── funnels ── */
+.funnels { display: flex; flex-direction: column; gap: 18px; }
+.funnel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
+.funnel-del { background: none; border: none; color: var(--muted, #888); cursor: pointer; font-size: 1.1rem; }
+.funnel-del:hover { color: #f87171; }
+.funnel-step { display: grid; grid-template-columns: 200px 1fr; gap: 10px; align-items: center; margin: 4px 0; }
+.funnel-label { font-size: .82rem; color: var(--muted, #aaa); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.funnel-bar-wrap { position: relative; display: flex; align-items: center; gap: 8px; }
+.funnel-bar { height: 16px; border-radius: 4px; background: var(--accent); min-width: 3px; transition: width .4s; }
+.funnel-nums { font-size: .78rem; color: var(--muted, #aaa); white-space: nowrap; }
+.funnel-nums .drop { color: #f87171; }
+.step-row { display: grid; grid-template-columns: 90px 1fr; gap: 8px; margin: 6px 0; }
+@media (max-width: 640px) { .funnel-step { grid-template-columns: 1fr; gap: 2px; } }
+
+/* ── 13.10.2026: comparison bar, commerce cards, shop insights ── */
+.compare { display: flex; flex-wrap: wrap; gap: 10px 28px; padding: 12px 18px; margin: 0 0 16px; font-size: .86rem; }
+.compare .k { color: var(--text-dim); margin-right: 8px; text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; }
+.compare .up { color: var(--green); font-weight: 600; }
+.compare .down { color: var(--red); font-weight: 600; }
+.commerce { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin: 0 0 16px; }
+.hint { font-size: .74rem; font-weight: 400; margin-left: 6px; }
+p.hint { margin: -4px 0 8px; }
+.pay-note { margin: 10px 2px 0; font-size: .78rem; color: var(--text-dim); }
+.muted { color: var(--text-dim); }
+.yoy { display: block; margin-top: 4px; font-size: .72rem; color: var(--text-dim); }
+.yoy.up { color: var(--green); } .yoy.down { color: var(--red); }
+
+/* embed dialog with website / app tabs (13.10.2026) */
+.modal.modal-wide { max-width: 620px; max-height: calc(100vh - 40px); overflow-y: auto; }
+.snip-tabs { display: flex; justify-content: center; gap: 6px; margin: 0 0 14px; }
+.snip-step { text-align: left; font-size: .8rem; margin: 6px 0 0 !important; }
+.snip-hint { text-align: left; font-size: .78rem; margin: -2px 0 12px !important; }
+.snip-hint code, .snip-step code { color: var(--cyan); }
+.snip-hint a { color: var(--cyan); }
+.modal-wide .snippet { white-space: pre-wrap; word-break: normal; overflow-wrap: anywhere; }
+.snip-tabs { display: inline-flex !important; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 3px; gap: 2px !important; }
+.snip-tabs button { background: transparent; border: none; color: var(--text-dim); padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 0.8rem; font-weight: 550; font-family: inherit; transition: all .15s; }
+.snip-tabs button.active { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
+
+/* 14.10.2026 professional theme: layout polish */
+.container { max-width: 1200px; padding: 0 24px 48px; }
+.stats { gap: 12px; }
+.panels { gap: 12px; }
+.chart-card { padding: 18px 20px; }
+.trend { font-size: 0.74rem; font-weight: 600; font-variant-numeric: tabular-nums; }
+.funnel-label, .funnel-nums { color: var(--text-dim); }
+.empty { color: var(--text-faint); }
+.footer-note { margin-top: 28px; font-size: .74rem; color: var(--text-faint); text-align: center; }
+.footer-note a { color: var(--text-dim); }
+
+/* ── 14.10.2026 v2: modern polish (Fabian: „hübscher, moderner“) ── */
+:root {
+  --accent: #6d8cff;
+  --accent-2: #a78bfa;
+  --accent-soft: rgba(109, 140, 255, 0.13);
+  --accent-line: rgba(109, 140, 255, 0.42);
+  --chart-visitors: #6d8cff;
+  --chart-pageviews: #a78bfa;
+  --bg: #0b0d12;
+  --surface: rgba(23, 26, 34, 0.72);
+  --surface-2: #1e222c;
+  --line: rgba(255, 255, 255, 0.07);
+  --line-strong: rgba(255, 255, 255, 0.12);
+  --radius: 16px;
+  --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px -12px rgba(0,0,0,.55);
+}
+body {
+  background:
+    radial-gradient(1100px 520px at 12% -10%, rgba(109,140,255,.10), transparent 60%),
+    radial-gradient(900px 480px at 100% 0%, rgba(167,139,250,.07), transparent 55%),
+    var(--bg);
+  background-attachment: fixed;
+  font-size: 14.5px; letter-spacing: -0.006em;
+}
+/* sticky glass header */
+header {
+  position: sticky; top: 0; z-index: 40; margin: 0 -24px 22px; padding: 14px 24px;
+  background: rgba(11,13,18,.72); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
+  border-bottom: 1px solid var(--line);
+}
+.brand .logo { width: 32px; height: 32px; border-radius: 9px; box-shadow: 0 0 0 1px var(--line-strong), 0 6px 20px -6px rgba(109,140,255,.55); }
+.brand h1 { font-size: 1.08rem; font-weight: 700; letter-spacing: -.02em; }
+/* cards: soft glass, gentle lift */
+.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); backdrop-filter: blur(10px); transition: border-color .2s, transform .2s, box-shadow .2s; }
+.card:hover { border-color: var(--line-strong); }
+.stats .card:hover, .commerce .card:hover { transform: translateY(-1px); box-shadow: var(--shadow), 0 14px 34px -18px rgba(109,140,255,.35); }
+/* KPI cards: big tabular numbers, trend as pill, mini sparkline */
+.stat { padding: 18px 20px 14px; min-height: 124px; }
+.stat .label { font-size: .76rem; font-weight: 500; color: var(--text-dim); letter-spacing: 0; text-transform: none; }
+.stat .value { font-size: 2rem; font-weight: 700; letter-spacing: -.035em; line-height: 1.1; }
+.trend { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 600; margin-top: 8px; }
+.trend.up { color: #4ade80; background: rgba(74,222,128,.10); }
+.trend.down { color: #fb7185; background: rgba(251,113,133,.10); }
+.trend:empty { display: none; }
+.spark { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 38px; pointer-events: none; opacity: .9; }
+.stat > .label, .stat > .value, .stat > .trend, .stat > .yoy { position: relative; z-index: 1; }
+/* first KPI gets a subtle accent edge */
+.stats .stat:first-child { background: linear-gradient(160deg, rgba(109,140,255,.16), rgba(23,26,34,.72) 55%); border-color: rgba(109,140,255,.28); }
+.commerce .stat:first-child { background: linear-gradient(160deg, rgba(74,222,128,.12), rgba(23,26,34,.72) 55%); border-color: rgba(74,222,128,.22); }
+/* segmented controls */
+.periods { background: rgba(255,255,255,.03); border-color: var(--line); border-radius: 12px; padding: 4px; }
+.periods button { border-radius: 9px; padding: 7px 13px; }
+.periods button.active { background: var(--surface-2); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 2px 8px rgba(0,0,0,.35); }
+.btn { border-radius: 10px; padding: 8px 14px; box-shadow: 0 6px 18px -8px rgba(109,140,255,.7); }
+.btn:hover { background: #5b7cf5; border-color: #5b7cf5; }
+.btn.ghost { box-shadow: none; background: rgba(255,255,255,.03); }
+.btn.ghost:hover { background: rgba(255,255,255,.06); }
+select, input { border-radius: 10px; background: rgba(255,255,255,.03); }
+.realtime { background: rgba(74,222,128,.07); border-color: rgba(74,222,128,.2); color: #b8f5cd; }
+.realtime .dot { box-shadow: 0 0 0 3px rgba(74,222,128,.18); }
+/* chart card */
+.chart-card { padding: 20px 22px 14px; }
+.chart-head strong { font-size: .95rem; font-weight: 650; }
+#chart { height: 240px; }
+.chart-head .legend .leg { border-radius: 999px; padding: 4px 10px; }
+.swatch { width: 8px; height: 8px; border-radius: 50%; }
+/* panels */
+.panel h3 { font-size: .9rem; font-weight: 650; letter-spacing: -.01em; }
+.panel h3 .em { filter: none; opacity: .9; }
+.bar { border-radius: 8px; padding: 8px 11px; }
+.bar .fill { border-radius: 8px; background: linear-gradient(90deg, rgba(109,140,255,.20), rgba(167,139,250,.08)); }
+.bar:hover .fill { background: linear-gradient(90deg, rgba(109,140,255,.30), rgba(167,139,250,.14)); }
+.bar .val { color: var(--text); font-weight: 600; opacity: .85; }
+.panel h3 .tabs { border-radius: 9px; background: rgba(255,255,255,.03); }
+.panel h3 .tabs button { border-radius: 7px; }
+/* modals */
+.modal { background: rgba(23,26,34,.92); backdrop-filter: blur(18px); border-radius: 20px; box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px var(--line-strong); }
+.modal-overlay { backdrop-filter: blur(6px); }
+/* login screen gets a hero glow */
+#login { background: radial-gradient(700px 420px at 50% 30%, rgba(109,140,255,.16), transparent 65%), rgba(6,7,10,.86); }
+#login .modal .logo { width: 56px; height: 56px; border-radius: 15px; box-shadow: 0 10px 30px -8px rgba(109,140,255,.7); }
+/* fade-in on load */
+@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
+#dash > * { animation: rise .35s ease both; }
+#dash > *:nth-child(2) { animation-delay: .04s; } #dash > *:nth-child(3) { animation-delay: .08s; } #dash > *:nth-child(4) { animation-delay: .12s; }
+.chip { border-radius: 999px; }
+@media (max-width: 760px) { header { margin: 0 -16px 18px; padding: 12px 16px; } .container { padding: 0 16px 40px; } .stat .value { font-size: 1.6rem; } }
+.stats .stat { padding-bottom: 40px; min-height: 0; }
+.commerce .stat { min-height: 0; }
+.spark { height: 32px; opacity: .8; }
+/* page paths read better in a tight mono with tabular feel */
+#p-pages .bar .name, #p-404 .bar .name, .feed-row .path { font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace; font-size: .8rem; letter-spacing: -.01em; }
+
+/* ── 14.10.2026 v3: own colour (ink teal + coral), icons instead of emoji ── */
+:root {
+  --accent: #2dd4bf;          /* teal: primary */
+  --accent-strong: #14b8a6;
+  --accent-2: #ff7a5c;        /* coral: highlights, the "one dot" */
+  --accent-soft: rgba(45, 212, 191, 0.12);
+  --accent-line: rgba(45, 212, 191, 0.40);
+  --chart-visitors: #2dd4bf;
+  --chart-pageviews: #ff9f85;
+  --bg: #071114;
+  --surface: rgba(14, 28, 32, 0.72);
+  --surface-2: #11252a;
+  --line: rgba(180, 255, 240, 0.07);
+  --line-strong: rgba(180, 255, 240, 0.13);
+  --text: #e7f3f1;
+  --text-dim: #8aa5a2;
+  --text-faint: #5b7471;
+  --cyan: #7ee8d8;
+}
+body {
+  background:
+    radial-gradient(1100px 560px at 8% -12%, rgba(45,212,191,.13), transparent 60%),
+    radial-gradient(800px 460px at 104% -4%, rgba(255,122,92,.08), transparent 55%),
+    var(--bg);
+  background-attachment: fixed;
+}
+header { background: rgba(7,17,20,.74); }
+.brand .logo { box-shadow: 0 0 0 1px var(--line-strong), 0 8px 22px -8px rgba(45,212,191,.6); }
+.btn { background: var(--accent-strong); border-color: var(--accent-strong); color: #04211d; font-weight: 650; box-shadow: 0 6px 18px -8px rgba(45,212,191,.75); }
+.btn:hover { background: var(--accent); border-color: var(--accent); }
+.btn.ghost { color: var(--text); }
+.stats .stat:first-child { background: linear-gradient(160deg, rgba(45,212,191,.16), rgba(14,28,32,.72) 55%); border-color: rgba(45,212,191,.28); }
+.commerce .stat:first-child { background: linear-gradient(160deg, rgba(255,122,92,.14), rgba(14,28,32,.72) 55%); border-color: rgba(255,122,92,.26); }
+.stats .card:hover, .commerce .card:hover { box-shadow: var(--shadow), 0 14px 34px -18px rgba(45,212,191,.35); }
+.bar .fill { background: linear-gradient(90deg, rgba(45,212,191,.20), rgba(45,212,191,.05)); }
+.bar:hover .fill { background: linear-gradient(90deg, rgba(45,212,191,.30), rgba(255,122,92,.10)); }
+.bar .cr { color: var(--accent-2); }
+.realtime { background: rgba(45,212,191,.08); border-color: rgba(45,212,191,.22); color: #b9f5ea; }
+.realtime .dot { background: var(--accent); box-shadow: 0 0 0 3px rgba(45,212,191,.2); }
+.chip { background: var(--accent-soft); border-color: var(--accent-line); }
+.trend.up { color: #5eead4; background: rgba(45,212,191,.12); }
+.trend.down { color: #ff9f85; background: rgba(255,122,92,.12); }
+.feed-row .goal { color: var(--accent-2); }
+.funnel-bar { background: linear-gradient(90deg, var(--accent), #5eead4); }
+#login { background: radial-gradient(700px 420px at 50% 30%, rgba(45,212,191,.18), transparent 65%), rgba(4,10,12,.88); }
+#login .modal .logo { box-shadow: 0 12px 32px -8px rgba(45,212,191,.7); }
+:focus-visible { outline-color: var(--accent); }
+/* icons */
+.ico { width: 16px; height: 16px; flex: 0 0 auto; vertical-align: -3px; display: inline-block; }
+.ico.ui { color: var(--text-dim); }
+.ico.h { width: 17px; height: 17px; color: var(--accent); }
+.ico.big { width: 30px; height: 30px; color: var(--accent); }
+.ico.brand { width: 15px; height: 15px; }
+.btn .ico { width: 15px; height: 15px; margin-right: 6px; vertical-align: -2px; color: currentColor; }
+.btn.ghost .ico { color: var(--text-dim); }
+.snip-tabs button .ico { margin-right: 6px; width: 14px; height: 14px; vertical-align: -2px; }
+.flag { width: 18px; height: 13.5px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255,255,255,.08); flex: 0 0 auto; }
+.bar .name { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
+.bar .name .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.chip .flag, .chip .ico { margin-right: 4px; }
+.chip button .ico { width: 13px; height: 13px; margin: 0; }
+.range .arrow .ico { width: 14px; height: 14px; }
+.feed-row .fl { display: inline-flex; width: 20px; justify-content: center; }
+.pay-note .ico { width: 14px; height: 14px; vertical-align: -2px; }
+.modal .logo.em { filter: none; opacity: 1; display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 16px; background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
+
+#p-pages .bar .name .txt, #p-404 .bar .name .txt, .feed-row .path { font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'JetBrains Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace; font-size: .78rem; font-weight: 400; color: #cfe3e0; }
+#p-pages .bar .name, #p-404 .bar .name { font-family: inherit; }
+
+/* ── header v4: floating card, exactly as wide as the content ── */
+header {
+  position: sticky; top: 12px; z-index: 40;
+  margin: 14px 0 22px; padding: 12px 14px 12px 16px;
+  border: 1px solid var(--line-strong); border-radius: 16px;
+  background: linear-gradient(180deg, rgba(20,40,44,.78), rgba(10,22,25,.78));
+  backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px);
+  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -24px rgba(0,0,0,.8), 0 0 0 1px rgba(45,212,191,.04);
+}
+header::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(45,212,191,.45), rgba(255,122,92,.35), transparent); pointer-events: none; }
+.brand { gap: 12px; }
+.brand .logo { width: 36px; height: 36px; border-radius: 10px; }
+.brand h1 { font-size: 1.12rem; }
+.brand .subtitle { font-size: .76rem; color: var(--text-faint); margin-top: 1px; }
+.header-right { gap: 8px; }
+.header-right .realtime, .header-right select, .header-right .btn { height: 36px; border-radius: 10px; }
+.header-right select { background-color: rgba(255,255,255,.03); border: 1px solid var(--line-strong); padding: 0 34px 0 12px; }
+.header-right .btn.ghost { background: rgba(255,255,255,.03); border-color: var(--line-strong); }
+.header-right .btn.ghost:hover { background: rgba(45,212,191,.08); border-color: var(--accent-line); }
+.header-right .realtime { display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; }
+.realtime .dot { animation: taci-pulse 2.4s ease-in-out infinite; }
+@keyframes taci-pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(45,212,191,.18); } 50% { box-shadow: 0 0 0 6px rgba(45,212,191,.05); } }
+@media (prefers-reduced-motion: reduce) { .realtime .dot { animation: none; } }
+@media (max-width: 760px) { header { margin: 10px 0 18px; top: 8px; padding: 10px 12px; } .brand .subtitle { display: none; } }
+
+/* native dropdown lists follow the dark theme (otherwise light text on a white popup) */
+select { color-scheme: dark; }
+select option { background: #0c1a1d; color: var(--text); }

package/public/tacilytics.js

@@ -0,0 +1,184 @@
+/* Tacilytics tracker — cookieless, ~2KB. (tacit: we count, we don't tell.) Embed:
+   <script defer data-domain="example.com" src="https://your-server/tacilytics.js"></script>
+   (/nyx.js is served as an alias for sites set up before the rename — same file.)
+
+   Optional data-* flags on the <script> tag:
+     data-honor-dnt        respect Do-Not-Track / Global Privacy Control (skip all tracking)
+     data-track-outbound   auto-record clicks on links to other domains as events
+     data-track-404        record a "404" event when the page is an error page
+                           (value = CSS selector that only exists on error pages, e.g. "body.is-act-error")
+     data-track-search     record "Search" events: value = query-string parameter, e.g. "search"
+                           (results counted via data-search-results selector, default ".product-box")
+   Purchases: tacilytics('Purchase', { value: 49.90, currency: 'EUR', items: 3 }) on the thank-you page
+   Custom events:  tacilytics('Signup')  ·  tacilytics('Signup', { plan: 'pro' })
+   window.nyx / window.nyxConfig still work as aliases. */
+(function () {
+  try {
+    var s = document.currentScript || document.querySelector('script[data-domain][src*="tacilytics.js"], script[data-domain][src*="nyx.js"]');
+    var domain = s && s.getAttribute('data-domain');
+    if (!s || !domain) return;
+
+    // Privacy signals (opt-in): if the visitor asked not to be tracked, honour it and do nothing.
+    if (s.hasAttribute('data-honor-dnt')) {
+      var dnt = navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack;
+      if (navigator.globalPrivacyControl === true || dnt === '1' || dnt === 'yes') return;
+    }
+
+    var endpoint = new URL(s.src).origin + '/api/collect';
+    var tz = '';
+    try { tz = Intl.DateTimeFormat().resolvedOptions().timeZone || ''; } catch (e) {}
+    var lang = (navigator.language || '').slice(0, 12);
+    var qs = new URLSearchParams(location.search);
+    var first = true;
+
+    function post(payload) {
+      // ignore local/preview hosts
+      if (location.hostname === 'localhost' || location.hostname === '127.0.0.1' || location.protocol === 'file:') return;
+      try {
+        var body = JSON.stringify(payload);
+        // text/plain keeps it a CORS-"simple" request, so the cross-origin beacon
+        // sends without a preflight (which sendBeacon cannot do).
+        if (navigator.sendBeacon && navigator.sendBeacon(endpoint, new Blob([body], { type: 'text/plain' }))) return;
+        fetch(endpoint, { method: 'POST', headers: { 'Content-Type': 'text/plain' }, body: body, keepalive: true, mode: 'no-cors' });
+      } catch (e) {}
+    }
+
+    function send(name, props) {
+      var payload = {
+        d: domain,
+        p: location.pathname,
+        r: name ? '' : (first ? document.referrer : ''),
+        tz: tz,
+        l: lang,
+        s: qs.get('utm_source') || '',
+        um: qs.get('utm_medium') || '',
+        uc: qs.get('utm_campaign') || '',
+      };
+      if (name) { payload.n = name; if (props && typeof props === 'object') payload.pr = props; }
+      else first = false;
+      post(payload);
+    }
+
+    // ── engagement time + scroll depth: report on leave ──
+    var acc = 0, since = (document.visibilityState === 'visible') ? Date.now() : 0, engPath = location.pathname;
+    var maxScroll = 0;
+    function measureScroll() {
+      var de = document.documentElement, b = document.body || de;
+      var h = Math.max(de.scrollHeight, b.scrollHeight), vh = window.innerHeight || de.clientHeight;
+      var y = window.pageYOffset || de.scrollTop || 0;
+      // short pages that fit the screen count as fully seen
+      var pct = h <= vh ? 100 : Math.round(((y + vh) / h) * 100);
+      if (pct > maxScroll) maxScroll = Math.min(100, pct);
+    }
+    var scrollTimer = 0;
+    window.addEventListener('scroll', function () { if (!scrollTimer) scrollTimer = setTimeout(function () { scrollTimer = 0; measureScroll(); }, 200); }, { passive: true });
+    window.addEventListener('load', measureScroll);
+    function engaged() { return Math.round((acc + (since ? Date.now() - since : 0)) / 1000); }
+    function flushEngagement() {
+      var secs = engaged();
+      measureScroll();
+      if (secs >= 1 || maxScroll > 0) post({ d: domain, p: engPath, e: 'engagement', dur: secs, sc: maxScroll });
+    }
+    function resetEngagement() { acc = 0; since = Date.now(); engPath = location.pathname; maxScroll = 0; }
+    document.addEventListener('visibilitychange', function () {
+      if (document.visibilityState === 'hidden') { if (since) { acc += Date.now() - since; since = 0; } flushEngagement(); }
+      else if (!since) { since = Date.now(); }
+    });
+    window.addEventListener('pagehide', flushEngagement);
+
+    // ── SPA navigation: count a pageview on pushState / replaceState / back-forward ──
+    var lastPath = location.pathname;
+    function onNav() {
+      if (location.pathname === lastPath) return;
+      flushEngagement();           // close out the page we're leaving
+      lastPath = location.pathname;
+      resetEngagement();           // start timing the new page
+      send();
+    }
+    var push = history.pushState;
+    history.pushState = function () { push.apply(this, arguments); onNav(); if (window.__tacilyticsSearchCheck) window.__tacilyticsSearchCheck(); };
+    var replace = history.replaceState;
+    history.replaceState = function () { replace.apply(this, arguments); onNav(); if (window.__tacilyticsSearchCheck) window.__tacilyticsSearchCheck(); };
+    window.addEventListener('popstate', onNav);
+
+    // ── custom events / goals:  tacilytics('Signup')  ·  tacilytics('Signup', { plan: 'pro' }) ──
+    window.tacilytics = function (name, props) { if (name && typeof name === 'string') send(name.slice(0, 80), props); };
+    window.nyx = window.tacilytics; // alias for installs from before the rename
+
+    // ── optional automatic outbound-link tracking ──
+    if (s.hasAttribute('data-track-outbound')) {
+      document.addEventListener('click', function (ev) {
+        var a = ev.target && ev.target.closest && ev.target.closest('a[href]');
+        if (!a) return;
+        try {
+          var u = new URL(a.href, location.href);
+          if ((u.protocol === 'http:' || u.protocol === 'https:') && u.hostname !== location.hostname) {
+            window.tacilytics('Outbound Link', { url: u.hostname + u.pathname });
+          }
+        } catch (e) {}
+      }, true);
+    }
+
+    // ── 404 pages: one event with the broken URL and where the visitor came from ──
+    var cfg = window.tacilyticsConfig || window.nyxConfig || {};
+    var sel404 = s.getAttribute('data-track-404') || cfg.track404 || '';
+    function check404() {
+      try {
+        if (sel404 && document.querySelector(sel404)) {
+          var from = '';
+          try { var ru = new URL(document.referrer); from = ru.hostname === location.hostname ? ru.pathname : ru.hostname; } catch (e) {}
+          window.tacilytics('404', { url: location.pathname, from: from });
+        }
+      } catch (e) {}
+    }
+
+    // ── site search: query + number of results ──
+    //   classic results page:  data-track-search="search"      (?search=…)
+    //   overlay search in the URL hash: tacilyticsConfig.searchHash = { param: 'mbai', key: 'query' }  (#mbai=query%3D…)
+    //   tacilyticsConfig.searchResults / searchEmpty: CSS selectors to count hits / detect "no results"
+    var searchParam = s.getAttribute('data-track-search') || cfg.searchParam || '';
+    var searchHash = cfg.searchHash || null;
+    var resSel = s.getAttribute('data-search-results') || cfg.searchResults || '.product-box';
+    var emptySel = cfg.searchEmpty || '';
+    var lastQ = '', searchTimer = 0;
+    function reportSearch(q) {
+      q = (q || '').trim().toLowerCase().slice(0, 60);
+      if (!q || q === lastQ) return;
+      clearTimeout(searchTimer);
+      // wait until the results have rendered (and the visitor stopped typing)
+      searchTimer = setTimeout(function () {
+        if (q === lastQ) return;
+        lastQ = q;
+        var n = 0;
+        try {
+          if (emptySel && document.querySelector(emptySel)) n = 0;
+          else n = document.querySelectorAll(resSel).length;
+        } catch (e) {}
+        window.tacilytics('Search', { q: q, results: n });
+      }, 2500);
+    }
+    function searchFromHash() {
+      if (!searchHash) return '';
+      var h = new URLSearchParams(location.hash.replace(/^#/, '')).get(searchHash.param);
+      if (!h) return '';
+      return new URLSearchParams(h).get(searchHash.key || 'query') || '';
+    }
+    function checkSearch() {
+      if (searchParam) reportSearch(new URLSearchParams(location.search).get(searchParam) || '');
+      if (searchHash) reportSearch(searchFromHash());
+    }
+    if (searchHash) {
+      window.addEventListener('hashchange', function () { reportSearch(searchFromHash()); });
+      window.__tacilyticsSearchCheck = window.__nyxSearchCheck = function () { reportSearch(searchFromHash()); }; // overlay updates the hash via history API
+    }
+    function afterLoad(fn) { if (document.readyState === 'complete' || document.readyState === 'interactive') setTimeout(fn, 0); else document.addEventListener('DOMContentLoaded', fn); }
+    afterLoad(function () { check404(); checkSearch(); });
+
+    // ── initial pageview ──
+    if (document.visibilityState === 'prerender') {
+      document.addEventListener('visibilitychange', function f() {
+        if (document.visibilityState !== 'prerender') { document.removeEventListener('visibilitychange', f); resetEngagement(); send(); }
+      });
+    } else { send(); }
+  } catch (e) {}
+})();

package/sdk/flutter/CHANGELOG.md

@@ -0,0 +1,6 @@
+## 0.2.0
+- Renamed to Tacilytics: package `tacilytics`, classes `Tacilytics`, `TacilyticsBeacon`, `TacilyticsRouteObserver`.
+- `package:tacilytics/nyx_analytics.dart` keeps the old names as deprecated aliases.
+
+## 0.1.0
+- First release: screen views, events, search, purchase, route observer, consent switch, per-launch session id.

package/sdk/flutter/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nyx & Fabian Budde
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.