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
+0
lines
Removed
-0
lines
Context
168
unchanged
Blobs
from fdd857847dc7
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.
11<!-- =====================================================================
22 ContactForge -- Admin Live Visitors.
33 KPI tiles + live visitor table + recent pageviews timeline.
44===================================================================== -->
55<style>
66 .vis-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap:12px; margin-bottom:22px; }
77 .vis-tile { background: var(--col-surface-1); border:1px solid var(--col-border); border-radius:12px; padding:14px 16px; }
88 .vis-tile .lbl { font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--col-text-3); font-weight:700; }
99 .vis-tile .val { font-size:26px; font-weight:700; color:#fff; font-family: var(--font-mono, monospace); margin-top:4px; }
1010 .vis-tile .sub { font-size:11px; color:var(--col-text-3); margin-top:4px; }
1111 .vis-tile.is-live { border-color: rgba(45,212,191,0.40); }
1212 .vis-tile.is-live .val { color:#2dd4bf; }
1313
1414 .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; }
1515 .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); }
1616 .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; }
1717 .vis-table tbody tr:last-child td { border-bottom: none; }
1818 .vis-table tbody tr:hover td { background: rgba(45,212,191,0.06); }
1919 .vis-table .num { text-align:right; font-family: var(--font-mono, monospace); }
2020 .vis-table .dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#2dd4bf; box-shadow:0 0 6px #2dd4bf; margin-right:6px; }
2121 .vis-table .dot.idle { background:#fbbf24; box-shadow:none; }
2222 .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; }
2323 .vis-table .pill.mobile { background: rgba(124,58,237,0.18); color:#c4b5fd; }
2424 .vis-table .pill.tablet { background: rgba(245,158,11,0.18); color:#fbbf24; }
2525 .vis-table .pill.bot { background: rgba(239,68,68,0.18); color:#fca5a5; }
2626
2727 .vis-section-head { display:flex; align-items:baseline; justify-content:space-between; margin: 26px 0 10px; }
2828 .vis-section-head h2 { font-size:14px; letter-spacing:1.2px; text-transform:uppercase; color:var(--col-text-3); margin:0; font-weight:700; }
2929</style>
3030
3131<div class="page-head">
3232 <div>
3333 <span class="page-eyebrow"><span class="dot"></span> Admin &middot; ContactForge analytics</span>
3434 <h1 class="page-title">Live visitors &amp; tracking</h1>
3535 <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>
3636 </div>
3737</div>
3838
3939[if:$schema_missing]
4040<div class="banner warn mb-3">
4141 <strong>Visitor-tracking schema not installed yet.</strong> Run db_schema.sql to enable visitors / tracking_sessions / pageviews / events / heatmap_* tables.
4242</div>
4343[/if]
4444
4545[if:$schema_ready]
4646
4747<!-- Headline KPIs -->
4848<div class="vis-grid">
4949 <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>
5050 <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>
5151 <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>
5252 <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>
5353</div>
5454
5555<!-- 30-day tiles -->
5656<div class="vis-section-head"><h2>Traffic, last 30 days</h2></div>
5757<div class="vis-grid">
5858 <div class="vis-tile"><div class="lbl">Pageviews (30d)</div><div class="val">$kpi_pageviews_30d</div></div>
5959 <div class="vis-tile"><div class="lbl">Visitors (30d)</div><div class="val">$kpi_visitors_30d</div></div>
6060 <div class="vis-tile"><div class="lbl">Sessions (30d)</div><div class="val">$kpi_sessions_30d</div></div>
6161 <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>
6262 <div class="vis-tile"><div class="lbl">Bounce rate</div><div class="val">$kpi_bounce_30d<span style="font-size:14px">%</span></div></div>
6363 <div class="vis-tile"><div class="lbl">Pages / session</div><div class="val">$kpi_pv_per_session</div></div>
6464</div>
6565
6666<!-- Live visitor table -->
6767<div class="vis-section-head">
6868 <h2>Live sessions ($live_count)</h2>
6969 <span class="text-xs text-dim">Seen in the last 5 minutes</span>
7070</div>
7171[if:$has_live]
7272<table class="vis-table">
7373 <thead>
7474 <tr>
7575 <th></th>
7676 <th>Page</th>
7777 <th>Device</th>
7878 <th>Browser / OS</th>
7979 <th>Country</th>
8080 <th>Referrer</th>
8181 <th class="num">PVs</th>
8282 <th>Last seen</th>
8383 </tr>
8484 </thead>
8585 <tbody>
8686 [loop:@live_rows]
8787 <tr>
8888 <td><span class="dot[if:!$is_active] idle[/if]"></span></td>
8989 <td>
9090 <div style="color:#fff;font-weight:600">$current_page</div>
9191 <div class="text-xs text-dim">Landed on $entry_page</div>
9292 </td>
9393 <td><span class="pill $device_type">$device_type</span></td>
9494 <td>$browser_name <span class="text-xs text-dim">on $os_name</span></td>
9595 <td>$country</td>
9696 <td>$ref_host</td>
9797 <td class="num">$pageviews</td>
9898 <td><span class="ts" data-ts="$idle_epoch" data-fmt="relative">$idle_label</span></td>
9999 </tr>
100100 [/loop]
101101 </tbody>
102102</table>
103103[/if]
104104[if:!$has_live]
105105<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>
106106[/if]
107107
108108<!-- Recent pageviews timeline -->
109109<div class="vis-section-head"><h2>Recent pageviews</h2></div>
110110[if:$has_recent]
111111<table class="vis-table">
112112 <thead>
113113 <tr>
114114 <th>Page</th>
115115 <th>Visitor</th>
116116 <th>Browser / OS</th>
117117 <th>When</th>
118118 </tr>
119119 </thead>
120120 <tbody>
121121 [loop:@recent_rows]
122122 <tr>
123123 <td>
124124 <div style="color:#fff;font-weight:600">$path</div>
125125 [if:$title]<div class="text-xs text-dim">$title</div>[/if]
126126 </td>
127127 <td>
128128 [if:$country]<span class="text-xs text-dim">$country &middot;</span>[/if]
129129 <span class="pill $device_type">$device_type</span>
130130 </td>
131131 <td>$browser <span class="text-xs text-dim">on $os</span></td>
132132 <td><span class="ts" data-ts="$when_epoch" data-fmt="relative">$when</span></td>
133133 </tr>
134134 [/loop]
135135 </tbody>
136136</table>
137137[/if]
138138[if:!$has_recent]
139139<div class="banner info">No pageviews recorded yet.</div>
140140[/if]
141141
142142<!-- Top pages (30d) -->
143143<div class="vis-section-head"><h2>Top pages (last 30 days)</h2></div>
144144[if:$has_top_pages]
145145<table class="vis-table">
146146 <thead>
147147 <tr>
148148 <th>Page</th>
149149 <th class="num">Pageviews</th>
150150 <th class="num">Sessions</th>
151151 </tr>
152152 </thead>
153153 <tbody>
154154 [loop:@top_pages]
155155 <tr>
156156 <td>$path</td>
157157 <td class="num">$pageviews</td>
158158 <td class="num">$sessions</td>
159159 </tr>
160160 [/loop]
161161 </tbody>
162162</table>
163163[/if]
164164[if:!$has_top_pages]
165165<div class="banner info">No top pages yet.</div>
166166[/if]
167167
168168[/if]