 Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory : /home/gositeme/domains/soundstudiopro.com/private_html/ |
<?php
// AJAX Navigation Dashboard - View performance and usage statistics
session_start();
// Simple authentication (enhance as needed)
if (!isset($_SESSION['is_admin']) || !$_SESSION['is_admin']) {
header('Location: /admin');
exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX Navigation Dashboard - SoundStudioPro</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
color: #333;
}
.dashboard {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.header {
background: rgba(255,255,255,0.95);
padding: 30px;
border-radius: 15px;
margin-bottom: 30px;
backdrop-filter: blur(10px);
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}
.header h1 {
color: #667eea;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 15px;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.stat-card {
background: rgba(255,255,255,0.95);
padding: 25px;
border-radius: 12px;
backdrop-filter: blur(10px);
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
border-left: 4px solid #667eea;
}
.stat-card h3 {
color: #667eea;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
}
.stat-value {
font-size: 2.5em;
font-weight: bold;
color: #333;
margin-bottom: 5px;
}
.stat-label {
color: #666;
font-size: 14px;
}
.chart-card {
background: rgba(255,255,255,0.95);
padding: 25px;
border-radius: 12px;
margin-bottom: 20px;
backdrop-filter: blur(10px);
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.chart-card h3 {
color: #667eea;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.progress-bar {
background: #e9ecef;
border-radius: 25px;
height: 8px;
margin: 10px 0;
overflow: hidden;
}
.progress-fill {
background: linear-gradient(90deg, #667eea, #764ba2);
height: 100%;
border-radius: 25px;
transition: width 0.3s ease;
}
.page-list {
list-style: none;
}
.page-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #eee;
}
.page-item:last-child {
border-bottom: none;
}
.refresh-btn {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border: none;
padding: 12px 24px;
border-radius: 8px;
cursor: pointer;
font-weight: bold;
transition: transform 0.2s ease;
}
.refresh-btn:hover {
transform: translateY(-2px);
}
.status-indicator {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 8px;
}
.status-active {
background: #48bb78;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
.activity-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
font-size: 14px;
color: #666;
}
.method-ajax {
color: #48bb78;
font-weight: bold;
}
.method-traditional {
color: #f56565;
}
</style>
</head>
<body>
<div class="dashboard">
<div class="header">
<h1>
<i class="fas fa-chart-line"></i>
AJAX Navigation Dashboard
</h1>
<p>Real-time monitoring of AJAX navigation performance and usage</p>
<button class="refresh-btn" onclick="refreshStats()">
<i class="fas fa-sync-alt"></i> Refresh Data
</button>
</div>
<div class="stats-grid">
<div class="stat-card">
<h3><i class="fas fa-mouse-pointer"></i> Total Navigations</h3>
<div class="stat-value" id="totalNavigations">Loading...</div>
<div class="stat-label">Since implementation</div>
</div>
<div class="stat-card">
<h3><i class="fas fa-clock"></i> Average Load Time</h3>
<div class="stat-value" id="avgLoadTime">Loading...</div>
<div class="stat-label">Milliseconds</div>
</div>
<div class="stat-card">
<h3><i class="fas fa-bolt"></i> AJAX vs Traditional</h3>
<div class="stat-value" id="ajaxPercentage">Loading...</div>
<div class="stat-label">AJAX usage percentage</div>
</div>
<div class="stat-card">
<h3><i class="fas fa-activity"></i> System Status</h3>
<div class="stat-value">
<span class="status-indicator status-active"></span>
Active
</div>
<div class="stat-label">AJAX navigation is running</div>
</div>
</div>
<div class="chart-card">
<h3><i class="fas fa-star"></i> Most Visited Pages</h3>
<div id="popularPages">Loading...</div>
</div>
<div class="chart-card">
<h3><i class="fas fa-history"></i> Recent Activity</h3>
<div id="recentActivity">Loading...</div>
</div>
</div>
<script>
function refreshStats() {
fetch('/ajax_monitor.php', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'X-Requested-With': 'XMLHttpRequest'
},
body: new URLSearchParams({
action: 'get_stats'
})
})
.then(response => response.json())
.then(data => {
updateDashboard(data);
})
.catch(error => {
console.error('Error fetching stats:', error);
document.getElementById('totalNavigations').textContent = 'Error';
});
}
function updateDashboard(stats) {
// Update total navigations
document.getElementById('totalNavigations').textContent =
stats.total_navigations.toLocaleString();
// Update average load time
document.getElementById('avgLoadTime').textContent =
stats.avg_load_time ? stats.avg_load_time + 'ms' : 'N/A';
// Update AJAX percentage
const total = stats.ajax_vs_traditional.ajax + stats.ajax_vs_traditional.traditional;
const percentage = total > 0 ?
Math.round((stats.ajax_vs_traditional.ajax / total) * 100) : 0;
document.getElementById('ajaxPercentage').textContent = percentage + '%';
// Update popular pages
updatePopularPages(stats.most_visited_pages);
// Update recent activity
updateRecentActivity(stats.recent_activity);
}
function updatePopularPages(pages) {
const container = document.getElementById('popularPages');
if (Object.keys(pages).length === 0) {
container.innerHTML = '<p style="color: #666;">No data available yet</p>';
return;
}
const maxVisits = Math.max(...Object.values(pages));
let html = '<ul class="page-list">';
for (const [page, visits] of Object.entries(pages)) {
const percentage = (visits / maxVisits) * 100;
html += `
<li class="page-item">
<span>${page}</span>
<div style="text-align: right;">
<strong>${visits} visits</strong>
<div class="progress-bar" style="width: 150px;">
<div class="progress-fill" style="width: ${percentage}%"></div>
</div>
</div>
</li>
`;
}
html += '</ul>';
container.innerHTML = html;
}
function updateRecentActivity(activity) {
const container = document.getElementById('recentActivity');
if (activity.length === 0) {
container.innerHTML = '<p style="color: #666;">No recent activity</p>';
return;
}
let html = '';
activity.forEach(item => {
const methodClass = item.method === 'ajax' ? 'method-ajax' : 'method-traditional';
html += `
<div class="activity-item">
<span>${item.page}</span>
<div>
<span class="${methodClass}">${item.method.toUpperCase()}</span>
<span style="margin-left: 10px; color: #999;">${item.time}</span>
</div>
</div>
`;
});
container.innerHTML = html;
}
// Initial load
refreshStats();
// Auto-refresh every 30 seconds
setInterval(refreshStats, 30000);
</script>
</body>
</html>