mirror of
https://github.com/Litlyx/litlyx
synced 2025-12-11 00:08:37 +01:00
143 lines
4.6 KiB
HTML
143 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
|
<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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
|
|
rel="stylesheet">
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<style>
|
|
* {
|
|
font-family: "Poppins";
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="w-dvw h-dvh p-8 flex flex-col">
|
|
<div class="font-bold text-4xl"> Traffic Overview </div>
|
|
<div class="w-full h-[2px] bg-black mt-3"></div>
|
|
<div class="bg-white w-full p-8">
|
|
<p class="text-sm text-gray-700 mb-6">
|
|
This section provides an overview of how users interacted with your website during the selected period.
|
|
The metrics are compared with the previous timeframe to identify growth or decline in overall traffic.
|
|
</p>
|
|
|
|
<h2 class="font-semibold mb-2">Key Data Highlights</h2>
|
|
<ul class="list-disc list-inside text-sm text-gray-800 space-y-1 mb-6">
|
|
<li>Total Visits: %VISITS%</li>
|
|
<li>Unique Visitors: %SESSIONS%</li>
|
|
</ul>
|
|
|
|
<p class="text-sm text-gray-700 mb-6">
|
|
💡 %AI_0%
|
|
</p>
|
|
|
|
<canvas id="traffic_graph" class="w-full !h-50 rounded-md flex items-center justify-center mb-8">
|
|
</canvas>
|
|
|
|
<h3 class="font-semibold mb-2">Device Distribution</h3>
|
|
<div class="flex justify-between items-start mb-6">
|
|
<ul class="list-disc list-inside text-sm text-gray-800 space-y-1">
|
|
<li>%DEVICE_0%</li>
|
|
<li>%DEVICE_1%</li>
|
|
<li>%DEVICE_2%</li>
|
|
</ul>
|
|
<canvas id="pie_graph" class="!w-32 !h-32 rounded-md flex items-center justify-center">
|
|
</canvas>
|
|
</div>
|
|
|
|
<h3 class="font-semibold mb-2">AI Insight</h3>
|
|
<p class="italic text-sm text-gray-600">
|
|
💡 %AI_1%
|
|
</p>
|
|
</div>
|
|
<div class="grow"></div>
|
|
<div class="flex justify-between items-center">
|
|
<div class="text-2xl">3/9</div>
|
|
<img class="w-10" src="%LOGO%">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
|
const ctxTraffic = document.getElementById('traffic_graph');
|
|
|
|
new Chart(ctxTraffic, {
|
|
type: 'line',
|
|
data: {
|
|
labels: VAR_LABELS_TRAFFIC,
|
|
datasets: [{
|
|
data: VAR_DATA_TRAFFIC,
|
|
borderWidth: 2,
|
|
borderColor: '#9d65bb',
|
|
backgroundColor: '#9d65bb66',
|
|
pointRadius: 0,
|
|
fill: true
|
|
}]
|
|
},
|
|
options: {
|
|
animation: false,
|
|
plugins: {
|
|
legend: { display: false },
|
|
tooltip: { enabled: false }
|
|
},
|
|
scales: {
|
|
x: {
|
|
display: false,
|
|
grid: { display: false }
|
|
},
|
|
y: {
|
|
display: false,
|
|
grid: { display: false }
|
|
}
|
|
},
|
|
elements: {
|
|
line: { tension: 0.3 }
|
|
},
|
|
layout: {
|
|
padding: 0
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
const ctxPie = document.getElementById('pie_graph');
|
|
|
|
new Chart(ctxPie, {
|
|
type: 'pie',
|
|
data: {
|
|
labels: VAR_LABELS_PIE,
|
|
datasets: [{
|
|
data: VAR_DATA_PIE,
|
|
borderWidth: 0,
|
|
backgroundColor: [
|
|
'#9d65bb',
|
|
'#ecbff0',
|
|
'#c493d5',
|
|
'#b07cc8',
|
|
'#d8aae2'
|
|
]
|
|
}]
|
|
},
|
|
options: {
|
|
animation: false,
|
|
plugins: {
|
|
legend: { display: false },
|
|
tooltip: { enabled: false }
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html> |