 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/.cursor-server/data/User/History/-271faaff/ |
<?php
session_start();
// Set page variables for header
$current_page = 'test_ajax';
$page_title = 'AJAX Navigation Test - SoundStudioPro';
$page_description = 'Test page for AJAX navigation system.';
include 'includes/header.php';
?>
<div class="container" id="pageContainer">
<div class="main-content">
<style>
.test-section {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 2rem;
margin: 2rem 0;
}
.test-button {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border: none;
padding: 1rem 2rem;
border-radius: 8px;
cursor: pointer;
margin: 0.5rem;
font-size: 1.4rem;
}
.test-button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.status {
padding: 1rem;
border-radius: 8px;
margin: 1rem 0;
font-family: monospace;
}
.status.success {
background: rgba(72, 187, 120, 0.2);
border: 1px solid rgba(72, 187, 120, 0.3);
color: #48bb78;
}
.status.error {
background: rgba(245, 101, 101, 0.2);
border: 1px solid rgba(245, 101, 101, 0.3);
color: #f56565;
}
.status.info {
background: rgba(102, 126, 234, 0.2);
border: 1px solid rgba(102, 126, 234, 0.3);
color: #667eea;
}
</style>
<div class="test-section">
<h1>🎯 AJAX Navigation Test Page</h1>
<p>This page tests the AJAX navigation system to ensure it's working correctly.</p>
</div>
<div class="test-section">
<h2>🔧 System Status</h2>
<div id="systemStatus" class="status info">Checking system status...</div>
<button class="test-button" onclick="checkSystemStatus()">Check Status</button>
</div>
<div class="test-section">
<h2>🧭 Navigation Tests</h2>
<p>Test navigation to different pages:</p>
<button class="test-button" onclick="testNavigation('home')">🏠 Test Home</button>
<button class="test-button" onclick="testNavigation('artists')">👥 Test Artists</button>
<button class="test-button" onclick="testNavigation('community')">🌍 Test Community</button>
<button class="test-button" onclick="testNavigation('dashboard')">📊 Test Dashboard</button>
<button class="test-button" onclick="testNavigation('library')">📚 Test Library</button>
<button class="test-button" onclick="testNavigation('feed')">📰 Test Feed</button>
</div>
<div class="test-section">
<h2>🎵 Global Player Test</h2>
<p>Test global player functionality:</p>
<button class="test-button" onclick="testGlobalPlayer()">Test Global Player</button>
<button class="test-button" onclick="testPlayButton()">Test Play Button</button>
<button class="test-button" onclick="testVolumeSlider()">Test Volume Slider</button>
<button class="test-button" onclick="testPlaylistButton()">Test Playlist Button</button>
</div>
<div class="test-section">
<h2>📝 Console Logs</h2>
<button class="test-button" onclick="clearLogs()">Clear Logs</button>
<div id="consoleLogs" class="status info" style="max-height: 300px; overflow-y: auto; font-size: 1.2rem;"></div>
</div>
<script>
// Intercept console.log to display in our log area
const originalLog = console.log;
const originalError = console.error;
function addToLog(message, type = 'info') {
const logsDiv = document.getElementById('consoleLogs');
const timestamp = new Date().toLocaleTimeString();
const logEntry = document.createElement('div');
logEntry.innerHTML = `<strong>[${timestamp}]</strong> ${message}`;
logEntry.className = `status ${type}`;
logsDiv.appendChild(logEntry);
logsDiv.scrollTop = logsDiv.scrollHeight;
}
console.log = function(...args) {
originalLog.apply(console, args);
addToLog(args.join(' '), 'info');
};
console.error = function(...args) {
originalError.apply(console, args);
addToLog(args.join(' '), 'error');
};
function checkSystemStatus() {
console.log('🔧 Checking AJAX navigation system status...');
const statusDiv = document.getElementById('systemStatus');
// Check if AJAX navigation is available
if (typeof window.ajaxNavigation !== 'undefined') {
console.log('✅ AJAX navigation system found');
statusDiv.innerHTML = '✅ AJAX navigation system is loaded and ready';
statusDiv.className = 'status success';
} else {
console.error('❌ AJAX navigation system not found');
statusDiv.innerHTML = '❌ AJAX navigation system not loaded';
statusDiv.className = 'status error';
}
// Check if pageContainer exists
const pageContainer = document.getElementById('pageContainer');
if (pageContainer) {
console.log('✅ pageContainer found');
} else {
console.error('❌ pageContainer not found');
}
// Check if global player is available
if (typeof window.globalPlayer !== 'undefined') {
console.log('✅ Global player found');
} else {
console.error('❌ Global player not found');
}
}
function testNavigation(page) {
console.log(`🧭 Testing navigation to: ${page}`);
if (typeof window.ajaxNavigation !== 'undefined') {
window.ajaxNavigation.navigateTo(page);
} else {
console.error('❌ AJAX navigation not available');
// Fallback to regular navigation
const urls = {
'home': '/',
'artists': '/artists.php',
'community': '/community.php',
'dashboard': '/dashboard.php',
'library': '/library_new.php',
'feed': '/feed.php'
};
window.location.href = urls[page] || '/';
}
}
function testGlobalPlayer() {
console.log('🎵 Testing global player...');
if (typeof window.globalPlayer !== 'undefined') {
console.log('✅ Global player is available');
window.globalPlayer.showPlayer();
} else {
console.error('❌ Global player not available');
}
}
function testPlayButton() {
console.log('▶️ Testing play button...');
const playBtn = document.getElementById('globalPlayBtn');
if (playBtn) {
console.log('✅ Play button found, clicking...');
playBtn.click();
} else {
console.error('❌ Play button not found');
}
}
function testVolumeSlider() {
console.log('🔊 Testing volume slider...');
const volumeSlider = document.getElementById('globalVolumeSlider');
if (volumeSlider) {
console.log('✅ Volume slider found');
volumeSlider.value = 75;
volumeSlider.dispatchEvent(new Event('input'));
} else {
console.error('❌ Volume slider not found');
}
}
function testPlaylistButton() {
console.log('📋 Testing playlist button...');
const playlistBtn = document.getElementById('globalPlaylistToggle');
if (playlistBtn) {
console.log('✅ Playlist button found, clicking...');
playlistBtn.click();
} else {
console.error('❌ Playlist button not found');
}
}
function clearLogs() {
const logsDiv = document.getElementById('consoleLogs');
logsDiv.innerHTML = '';
console.log('📝 Logs cleared');
}
// Auto-check system status on page load
document.addEventListener('DOMContentLoaded', () => {
console.log('🎯 AJAX Navigation Test Page loaded');
setTimeout(checkSystemStatus, 1000);
});
</script>
</div>
</div>
<?php include 'includes/footer.php'; ?>