160 lines
4.8 KiB
HTML
160 lines
4.8 KiB
HTML
{{block "tracking" .}}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Tracking Dashboard</title>
|
|
<link rel="stylesheet" href="/css/main.css?v={{.BuildNumber}}" integrity="{{index .Integrity.CSS "main.css" }}" crossorigin="anonymous" />
|
|
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
|
|
<link rel="icon" type="image/x-icon" href="/images/favicon.ico" />
|
|
<style>
|
|
.tracking-dashboard {
|
|
max-width: 1200px;
|
|
margin: 2rem auto;
|
|
padding: 0 1rem;
|
|
}
|
|
.tracking-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 2rem 0;
|
|
background: var(--bg-secondary);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
.tracking-table th,
|
|
.tracking-table td {
|
|
padding: 1rem;
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.tracking-table th {
|
|
background: var(--bg-tertiary);
|
|
font-weight: 600;
|
|
}
|
|
.tracking-table tr:hover {
|
|
background: var(--bg-hover);
|
|
}
|
|
.metric-card {
|
|
background: var(--bg-secondary);
|
|
border-radius: 8px;
|
|
padding: 1.5rem;
|
|
margin: 1rem 0;
|
|
border: 1px solid var(--border);
|
|
}
|
|
.metric-value {
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
color: var(--color-primary);
|
|
}
|
|
.metric-label {
|
|
color: var(--color-secondary);
|
|
font-size: 0.9rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
.metrics-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 1rem;
|
|
margin: 2rem 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<nav class="logo">
|
|
<a href="/">
|
|
<svg width="64" height="64" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="16" cy="16" r="15" fill="#1e1e1e" stroke="var(--color)" stroke-width="2"/>
|
|
<line x1="10" y1="8" x2="10" y2="24" stroke="var(--color)" stroke-width="2" stroke-linecap="round"/>
|
|
<line x1="10" y1="16" x2="22" y2="8" stroke="var(--color)" stroke-width="2" stroke-linecap="round"/>
|
|
<line x1="10" y1="16" x2="22" y2="24" stroke="var(--color)" stroke-width="2" stroke-linecap="round"/>
|
|
</svg>
|
|
</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<main>
|
|
<div class="tracking-dashboard">
|
|
<h1>Tracking Dashboard</h1>
|
|
|
|
<div class="metrics-grid">
|
|
<div class="metric-card">
|
|
<div class="metric-value">{{.TotalVisits}}</div>
|
|
<div class="metric-label">Total Visits</div>
|
|
</div>
|
|
<div class="metric-card">
|
|
<div class="metric-value">{{.UniqueVisitors}}</div>
|
|
<div class="metric-label">Unique Visitors</div>
|
|
</div>
|
|
<div class="metric-card">
|
|
<div class="metric-value">{{.TodayVisits}}</div>
|
|
<div class="metric-label">Today's Visits</div>
|
|
</div>
|
|
<div class="metric-card">
|
|
<div class="metric-value">{{.ActiveSessions}}</div>
|
|
<div class="metric-label">Active Sessions</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Recent Visits</h2>
|
|
<table class="tracking-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Timestamp</th>
|
|
<th>IP Address</th>
|
|
<th>Path</th>
|
|
<th>User Agent</th>
|
|
<th>Referrer</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{range .RecentVisits}}
|
|
<tr>
|
|
<td>{{.Timestamp}}</td>
|
|
<td>{{.IPAddress}}</td>
|
|
<td>{{.Path}}</td>
|
|
<td>{{.UserAgent}}</td>
|
|
<td>{{.Referrer}}</td>
|
|
</tr>
|
|
{{else}}
|
|
<tr>
|
|
<td colspan="5" style="text-align: center; color: var(--color-secondary);">
|
|
No visits recorded yet
|
|
</td>
|
|
</tr>
|
|
{{end}}
|
|
</tbody>
|
|
</table>
|
|
|
|
<h2>Top Pages</h2>
|
|
<table class="tracking-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Path</th>
|
|
<th>Visits</th>
|
|
<th>Percentage</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{range .TopPages}}
|
|
<tr>
|
|
<td>{{.Path}}</td>
|
|
<td>{{.Count}}</td>
|
|
<td>{{printf "%.2f" .Percentage}}%</td>
|
|
</tr>
|
|
{{else}}
|
|
<tr>
|
|
<td colspan="3" style="text-align: center; color: var(--color-secondary);">
|
|
No page data available
|
|
</td>
|
|
</tr>
|
|
{{end}}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</main>
|
|
</body>
|
|
</html>
|
|
{{end}}
|