 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/utils/ |
<?php
// Test dashboard without login requirement
session_start();
// Mock user data for testing
if (!isset($_SESSION['user_id'])) {
$_SESSION['user_id'] = 1;
$_SESSION['user_name'] = 'Test User';
$_SESSION['user_email'] = 'test@example.com';
$_SESSION['credits'] = 25;
$_SESSION['plan'] = 'premium';
}
// Include database configuration
require_once 'config/database.php';
$user_name = $_SESSION['user_name'];
$user_email = $_SESSION['user_email'];
$credits = $_SESSION['credits'] ?? 10;
$plan = $_SESSION['plan'] ?? 'free';
// Get user's music history from database
$music_history = getUserMusicTracks($_SESSION['user_id'], 10);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard Test - 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: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
color: white;
line-height: 1.6;
min-height: 100vh;
}
/* Navigation */
.navbar {
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding: 1rem 2rem;
position: sticky;
top: 0;
z-index: 100;
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1400px;
margin: 0 auto;
}
.logo {
display: flex;
align-items: center;
gap: 1rem;
font-size: 2.4rem;
font-weight: bold;
color: #667eea;
}
.logo i {
font-size: 3rem;
}
.nav-menu {
display: flex;
align-items: center;
gap: 2rem;
}
.nav-link {
color: #a0aec0;
text-decoration: none;
font-size: 1.6rem;
transition: color 0.3s ease;
padding: 0.8rem 1.6rem;
border-radius: 8px;
}
.nav-link:hover,
.nav-link.active {
color: #667eea;
background: rgba(102, 126, 234, 0.1);
}
.user-menu {
display: flex;
align-items: center;
gap: 1rem;
}
.credits {
background: linear-gradient(135deg, #667eea, #764ba2);
padding: 0.8rem 1.6rem;
border-radius: 8px;
font-size: 1.4rem;
font-weight: bold;
display: flex;
align-items: center;
gap: 0.8rem;
}
.logout-btn {
background: rgba(255, 255, 255, 0.1);
color: white;
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 0.8rem 1.6rem;
border-radius: 8px;
text-decoration: none;
font-size: 1.4rem;
display: flex;
align-items: center;
gap: 0.8rem;
transition: all 0.3s ease;
}
.logout-btn:hover {
background: rgba(255, 255, 255, 0.15);
}
/* Main Content */
.main-container {
max-width: 1400px;
margin: 0 auto;
padding: 2rem;
}
.dashboard-header {
margin-bottom: 3rem;
}
.welcome-text {
font-size: 4.8rem;
font-weight: 700;
margin-bottom: 1rem;
color: white;
}
.subtitle {
color: #a0aec0;
font-size: 2rem;
}
/* Quick Actions */
.quick-actions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.action-card {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 3rem;
transition: all 0.3s ease;
backdrop-filter: blur(20px);
}
.action-card:hover {
transform: translateY(-5px);
border-color: rgba(102, 126, 234, 0.3);
box-shadow: 0 20px 60px rgba(102, 126, 234, 0.1);
}
.action-icon {
font-size: 3rem;
color: #667eea;
margin-bottom: 2rem;
}
.action-title {
font-size: 2.4rem;
font-weight: 600;
margin-bottom: 1rem;
color: white;
}
.action-description {
color: #a0aec0;
margin-bottom: 2rem;
font-size: 1.6rem;
}
.action-btn {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border: none;
padding: 1rem 2rem;
border-radius: 10px;
font-weight: 600;
font-size: 1.4rem;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.8rem;
}
.action-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}
/* Music Library */
.section-title {
font-size: 3.2rem;
font-weight: 700;
margin-bottom: 2rem;
display: flex;
align-items: center;
gap: 1rem;
color: white;
}
.music-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 1.5rem;
margin-bottom: 3rem;
}
.music-card {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 2rem;
transition: all 0.3s ease;
backdrop-filter: blur(20px);
}
.music-card:hover {
transform: translateY(-5px);
border-color: rgba(102, 126, 234, 0.3);
box-shadow: 0 20px 60px rgba(102, 126, 234, 0.1);
}
.music-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1rem;
}
.music-title {
font-size: 1.6rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: white;
}
.music-prompt {
color: #a0aec0;
font-size: 1.4rem;
}
.music-status {
padding: 0.25rem 0.75rem;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 600;
}
.status-complete {
background: rgba(72, 187, 120, 0.2);
color: #48bb78;
}
.status-processing {
background: rgba(245, 158, 11, 0.2);
color: #f59e0b;
}
.music-details {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
font-size: 1.4rem;
color: #a0aec0;
}
.music-actions {
display: flex;
gap: 0.5rem;
}
.btn-small {
padding: 0.5rem 1rem;
border: none;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.btn-primary {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
}
.btn-secondary {
background: rgba(255, 255, 255, 0.1);
color: white;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.btn-small:hover {
transform: translateY(-1px);
}
/* Stats */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin-bottom: 3rem;
}
.stat-card {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 2rem;
text-align: center;
backdrop-filter: blur(20px);
transition: all 0.3s ease;
}
.stat-card:hover {
transform: translateY(-3px);
border-color: rgba(102, 126, 234, 0.3);
box-shadow: 0 15px 45px rgba(102, 126, 234, 0.1);
}
.stat-number {
font-size: 3.2rem;
font-weight: 700;
color: #667eea;
margin-bottom: 1rem;
}
.stat-label {
color: #a0aec0;
font-size: 1.4rem;
}
/* Responsive */
@media (max-width: 768px) {
.nav-container {
flex-direction: column;
gap: 1rem;
}
.nav-menu {
flex-wrap: wrap;
justify-content: center;
}
.quick-actions {
grid-template-columns: 1fr;
}
.music-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar">
<div class="nav-container">
<div class="logo">
<i class="fas fa-music"></i>
<span>SoundStudio</span>
</div>
<div class="nav-menu">
<a href="/dashboard.php" class="nav-link active">Dashboard</a>
<a href="/#create" class="nav-link">Create Music</a>
<a href="/library.php" class="nav-link">My Library</a>
<a href="/player.php" class="nav-link">SoundStudioProPlayer</a>
<a href="/bands.php" class="nav-link">Bands Directory</a>
<a href="/community.php" class="nav-link">Community</a>
<?php if (isset($_SESSION['is_admin']) && $_SESSION['is_admin']): ?>
<a href="/admin.html" class="nav-link">Admin</a>
<?php endif; ?>
</div>
<div class="user-menu">
<div class="credits">
<i class="fas fa-coins"></i>
<?php echo $credits; ?> Credits
</div>
<a href="/auth/logout.php" class="logout-btn">
<i class="fas fa-sign-out-alt"></i>
Logout
</a>
</div>
</div>
</nav>
<!-- Main Content -->
<div class="main-container">
<!-- Dashboard Header -->
<div class="dashboard-header">
<h1 class="welcome-text">Welcome back, <?php echo htmlspecialchars($user_name); ?>! 👋</h1>
<p class="subtitle">Ready to create some amazing music with AI?</p>
</div>
<!-- Quick Actions -->
<div class="quick-actions">
<div class="action-card">
<div class="action-icon">🎵</div>
<h3 class="action-title">Create New Music</h3>
<p class="action-description">Generate original AI music with custom prompts and styles.</p>
<a href="/#create" class="action-btn">
<i class="fas fa-plus"></i> Start Creating
</a>
</div>
<div class="action-card">
<div class="action-icon">📝</div>
<h3 class="action-title">Generate Lyrics</h3>
<p class="action-description">Create song lyrics with AI assistance and multiple variations.</p>
<a href="/#create" class="action-btn">
<i class="fas fa-pen"></i> Write Lyrics
</a>
</div>
<div class="action-card">
<div class="action-icon">🎬</div>
<h3 class="action-title">Music Videos</h3>
<p class="action-description">Create stunning music videos with AI-generated visuals.</p>
<a href="/#create" class="action-btn">
<i class="fas fa-video"></i> Make Video
</a>
</div>
<div class="action-card">
<div class="action-icon">🎧</div>
<h3 class="action-title">SoundStudioProPlayer</h3>
<p class="action-description">Public music player for sharing your tracks with the world.</p>
<a href="/player.php" class="action-btn">
<i class="fas fa-play-circle"></i> Open Player
</a>
</div>
</div>
<!-- Stats -->
<div class="stats-grid">
<div class="stat-card">
<div class="stat-number"><?php echo count($music_history); ?></div>
<div class="stat-label">Total Tracks</div>
</div>
<div class="stat-card">
<div class="stat-number"><?php echo $credits; ?></div>
<div class="stat-label">Credits Left</div>
</div>
<div class="stat-card">
<div class="stat-number"><?php echo ucfirst($plan); ?></div>
<div class="stat-label">Current Plan</div>
</div>
<div class="stat-card">
<div class="stat-number"><?php echo count(array_filter($music_history, function($m) { return $m['status'] === 'complete'; })); ?></div>
<div class="stat-label">Completed</div>
</div>
</div>
<!-- Recent Music -->
<h2 class="section-title">
<i class="fas fa-music"></i>
Recent Music
</h2>
<div class="music-grid">
<?php if (empty($music_history)): ?>
<div style="grid-column: 1 / -1; text-align: center; padding: 3rem; color: rgba(255, 255, 255, 0.6);">
<div style="font-size: 4rem; margin-bottom: 1rem;">🎵</div>
<h3>No music yet</h3>
<p>Start creating your first AI-generated music!</p>
<a href="/#create" class="action-btn" style="margin-top: 1rem;">
<i class="fas fa-plus"></i> Create Your First Track
</a>
</div>
<?php else: ?>
<?php foreach ($music_history as $music): ?>
<div class="music-card">
<div class="music-header">
<div>
<div class="music-title"><?php echo htmlspecialchars($music['title']); ?></div>
<div class="music-prompt"><?php echo htmlspecialchars($music['prompt']); ?></div>
</div>
<div class="music-status status-<?php echo $music['status']; ?>">
<?php echo ucfirst($music['status']); ?>
</div>
</div>
<div class="music-details">
<span><i class="fas fa-clock"></i> <?php echo $music['duration']; ?>s</span>
<span><i class="fas fa-calendar"></i> <?php echo date('M j, Y', strtotime($music['created_at'])); ?></span>
</div>
<div class="music-actions">
<?php if ($music['status'] === 'complete' && $music['audio_url']): ?>
<a href="<?php echo htmlspecialchars($music['audio_url']); ?>" class="btn-small btn-primary" target="_blank">
<i class="fas fa-play"></i> Play
</a>
<a href="<?php echo htmlspecialchars($music['audio_url']); ?>" class="btn-small btn-secondary" download>
<i class="fas fa-download"></i> Download
</a>
<?php else: ?>
<span class="btn-small btn-secondary">
<i class="fas fa-spinner fa-spin"></i> Processing
</span>
<?php endif; ?>
</div>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
</div>
<script>
// Add smooth scrolling for navigation
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// Add active state to navigation
document.querySelectorAll('.nav-link').forEach(link => {
link.addEventListener('click', function() {
document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
this.classList.add('active');
});
});
</script>
</body>
</html>