63 lines
2.0 KiB
HTML
63 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Website Analytics Dashboard</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.0/dist/cyborg/bootstrap.min.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class="container mt-5">
|
|
<h1 class="text-center text-white">Website Analytics Dashboard</h1>
|
|
|
|
<div class="row">
|
|
<!-- Total Visitors -->
|
|
<div class="col-md-4">
|
|
<div class="card text-center bg-primary text-white">
|
|
<div class="card-body">
|
|
<h4>Total Visitors</h4>
|
|
<h2 id="total-visitors">Loading...</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Page Views -->
|
|
<div class="col-md-4">
|
|
<div class="card text-center bg-success text-white">
|
|
<div class="card-body">
|
|
<h4>Page Views</h4>
|
|
<h2 id="page-views">Loading...</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Most Visited Page -->
|
|
<div class="col-md-4">
|
|
<div class="card text-center bg-warning text-white">
|
|
<div class="card-body">
|
|
<h4>Most Visited Page</h4>
|
|
<h2 id="top-page">Loading...</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Google Analytics API Script -->
|
|
<script>
|
|
async function fetchAnalytics() {
|
|
// Simulated Data (Replace with API Fetch)
|
|
setTimeout(() => {
|
|
document.getElementById('total-visitors').textContent = "1,234";
|
|
document.getElementById('page-views').textContent = "5,678";
|
|
document.getElementById('top-page').textContent = "/home";
|
|
}, 2000);
|
|
}
|
|
|
|
fetchAnalytics();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
|
|