Diff -- /var/www/vhosts/3dshawn.com/crm.3dshawn.com/TEMPLATES/cf_admin_visitors.html

O Operator
Diff

/var/www/vhosts/3dshawn.com/crm.3dshawn.com/TEMPLATES/cf_admin_visitors.html

added on local at 2026-07-11 18:32:01

Added
+168
lines
Removed
-0
lines
Context
0
unchanged
Blobs
from
to fdd857847dc7
Restore this content →
Unified diff
Naive LCS-based line diff. Additions in emerald, deletions in rose. Both sides decompressed live from BLOB_STORE.
1<!-- =====================================================================
2 ContactForge -- Admin Live Visitors.
3 KPI tiles + live visitor table + recent pageviews timeline.
4===================================================================== -->
5<style>
6 .vis-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap:12px; margin-bottom:22px; }
7 .vis-tile { background: var(--col-surface-1); border:1px solid var(--col-border); border-radius:12px; padding:14px 16px; }
8 .vis-tile .lbl { font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--col-text-3); font-weight:700; }
9 .vis-tile .val { font-size:26px; font-weight:700; color:#fff; font-family: var(--font-mono, monospace); margin-top:4px; }
10 .vis-tile .sub { font-size:11px; color:var(--col-text-3); margin-top:4px; }
11 .vis-tile.is-live { border-color: rgba(45,212,191,0.40); }
12 .vis-tile.is-live .val { color:#2dd4bf; }
13
14 .vis-table { width:100%; border-collapse: separate; border-spacing:0; background: var(--col-surface-1); border:1px solid var(--col-border); border-radius:12px; overflow:hidden; }
15 .vis-table thead th { background: var(--col-surface-2); padding:11px 14px; text-align:left; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--col-text-3); font-weight:700; border-bottom:1px solid var(--col-border); }
16 .vis-table tbody td { padding:12px 14px; border-bottom:1px solid var(--col-border); font-size:13px; color: var(--col-text-2); vertical-align:middle; }
17 .vis-table tbody tr:last-child td { border-bottom: none; }
18 .vis-table tbody tr:hover td { background: rgba(45,212,191,0.06); }
19 .vis-table .num { text-align:right; font-family: var(--font-mono, monospace); }
20 .vis-table .dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#2dd4bf; box-shadow:0 0 6px #2dd4bf; margin-right:6px; }
21 .vis-table .dot.idle { background:#fbbf24; box-shadow:none; }
22 .vis-table .pill { font-size:9px; font-weight:700; padding:3px 8px; border-radius:6px; letter-spacing:0.8px; text-transform:uppercase; background: rgba(45,212,191,0.18); color:#5eead4; }
23 .vis-table .pill.mobile { background: rgba(124,58,237,0.18); color:#c4b5fd; }
24 .vis-table .pill.tablet { background: rgba(245,158,11,0.18); color:#fbbf24; }
25 .vis-table .pill.bot { background: rgba(239,68,68,0.18); color:#fca5a5; }
26
27 .vis-section-head { display:flex; align-items:baseline; justify-content:space-between; margin: 26px 0 10px; }
28 .vis-section-head h2 { font-size:14px; letter-spacing:1.2px; text-transform:uppercase; color:var(--col-text-3); margin:0; font-weight:700; }
29</style>
30
31<div class="page-head">
32 <div>
33 <span class="page-eyebrow"><span class="dot"></span> Admin &middot; ContactForge analytics</span>
34 <h1 class="page-title">Live visitors &amp; tracking</h1>
35 <p class="page-subtitle">Every visitor currently on the ContactForge marketing site -- OS, browser, device, current page. Use this to see where CRM signups are coming from in real time.</p>
36 </div>
37</div>
38
39[if:$schema_missing]
40<div class="banner warn mb-3">
41 <strong>Visitor-tracking schema not installed yet.</strong> Run db_schema.sql to enable visitors / tracking_sessions / pageviews / events / heatmap_* tables.
42</div>
43[/if]
44
45[if:$schema_ready]
46
47<!-- Headline KPIs -->
48<div class="vis-grid">
49 <div class="vis-tile is-live"><div class="lbl">Live now</div><div class="val">$kpi_live_now</div><div class="sub">visitors active in last 2 min</div></div>
50 <div class="vis-tile"><div class="lbl">Visitors today</div><div class="val">$kpi_visitors_today</div><div class="sub">distinct cookies since midnight</div></div>
51 <div class="vis-tile"><div class="lbl">Pageviews today</div><div class="val">$kpi_pageviews_today</div><div class="sub">all page loads today</div></div>
52 <div class="vis-tile"><div class="lbl">Sessions today</div><div class="val">$kpi_sessions_today</div><div class="sub">30-min idle window</div></div>
53</div>
54
55<!-- 30-day tiles -->
56<div class="vis-section-head"><h2>Traffic, last 30 days</h2></div>
57<div class="vis-grid">
58 <div class="vis-tile"><div class="lbl">Pageviews (30d)</div><div class="val">$kpi_pageviews_30d</div></div>
59 <div class="vis-tile"><div class="lbl">Visitors (30d)</div><div class="val">$kpi_visitors_30d</div></div>
60 <div class="vis-tile"><div class="lbl">Sessions (30d)</div><div class="val">$kpi_sessions_30d</div></div>
61 <div class="vis-tile"><div class="lbl">Avg. session</div><div class="val">$kpi_avg_seconds_30d<span style="font-size:14px">s</span></div></div>
62 <div class="vis-tile"><div class="lbl">Bounce rate</div><div class="val">$kpi_bounce_30d<span style="font-size:14px">%</span></div></div>
63 <div class="vis-tile"><div class="lbl">Pages / session</div><div class="val">$kpi_pv_per_session</div></div>
64</div>
65
66<!-- Live visitor table -->
67<div class="vis-section-head">
68 <h2>Live sessions ($live_count)</h2>
69 <span class="text-xs text-dim">Seen in the last 5 minutes</span>
70</div>
71[if:$has_live]
72<table class="vis-table">
73 <thead>
74 <tr>
75 <th></th>
76 <th>Page</th>
77 <th>Device</th>
78 <th>Browser / OS</th>
79 <th>Country</th>
80 <th>Referrer</th>
81 <th class="num">PVs</th>
82 <th>Last seen</th>
83 </tr>
84 </thead>
85 <tbody>
86 [loop:@live_rows]
87 <tr>
88 <td><span class="dot[if:!$is_active] idle[/if]"></span></td>
89 <td>
90 <div style="color:#fff;font-weight:600">$current_page</div>
91 <div class="text-xs text-dim">Landed on $entry_page</div>
92 </td>
93 <td><span class="pill $device_type">$device_type</span></td>
94 <td>$browser_name <span class="text-xs text-dim">on $os_name</span></td>
95 <td>$country</td>
96 <td>$ref_host</td>
97 <td class="num">$pageviews</td>
98 <td><span class="ts" data-ts="$idle_epoch" data-fmt="relative">$idle_label</span></td>
99 </tr>
100 [/loop]
101 </tbody>
102</table>
103[/if]
104[if:!$has_live]
105<div class="banner info">No live visitors right now. Once the t.js snippet starts firing on crm.3dshawn.com, anyone currently browsing will appear here.</div>
106[/if]
107
108<!-- Recent pageviews timeline -->
109<div class="vis-section-head"><h2>Recent pageviews</h2></div>
110[if:$has_recent]
111<table class="vis-table">
112 <thead>
113 <tr>
114 <th>Page</th>
115 <th>Visitor</th>
116 <th>Browser / OS</th>
117 <th>When</th>
118 </tr>
119 </thead>
120 <tbody>
121 [loop:@recent_rows]
122 <tr>
123 <td>
124 <div style="color:#fff;font-weight:600">$path</div>
125 [if:$title]<div class="text-xs text-dim">$title</div>[/if]
126 </td>
127 <td>
128 [if:$country]<span class="text-xs text-dim">$country &middot;</span>[/if]
129 <span class="pill $device_type">$device_type</span>
130 </td>
131 <td>$browser <span class="text-xs text-dim">on $os</span></td>
132 <td><span class="ts" data-ts="$when_epoch" data-fmt="relative">$when</span></td>
133 </tr>
134 [/loop]
135 </tbody>
136</table>
137[/if]
138[if:!$has_recent]
139<div class="banner info">No pageviews recorded yet.</div>
140[/if]
141
142<!-- Top pages (30d) -->
143<div class="vis-section-head"><h2>Top pages (last 30 days)</h2></div>
144[if:$has_top_pages]
145<table class="vis-table">
146 <thead>
147 <tr>
148 <th>Page</th>
149 <th class="num">Pageviews</th>
150 <th class="num">Sessions</th>
151 </tr>
152 </thead>
153 <tbody>
154 [loop:@top_pages]
155 <tr>
156 <td>$path</td>
157 <td class="num">$pageviews</td>
158 <td class="num">$sessions</td>
159 </tr>
160 [/loop]
161 </tbody>
162</table>
163[/if]
164[if:!$has_top_pages]
165<div class="banner info">No top pages yet.</div>
166[/if]
167
168[/if]