 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/includes/ |
<?php
// Start session if not already started
if (session_status() === PHP_SESSION_NONE) {
session_start();
}
// Get current page for navigation highlighting
$current_page = basename($_SERVER['PHP_SELF'], '.php');
// Include database connection
require_once __DIR__ . '/../config/database.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= isset($page_title) ? $page_title . ' - ' : '' ?>SoundStudioPro - Create Divine Music</title>
<meta name="description" content="<?= isset($page_description) ? $page_description : 'Create beautiful music with AI-powered tools. Join the divine music creation community.' ?>">
<!-- Fonts -->
<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=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<!-- Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Main CSS -->
<link rel="stylesheet" href="/assets/css/main.css">
<!-- Theme System (Preserved from original) -->
<link rel="stylesheet" href="/comprehensive_colors.css">
<style>
/* Header-specific styles */
.header {
background: rgba(10, 10, 10, 0.95);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border-light);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
transition: var(--transition-normal);
}
.header-content {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-md) 0;
}
.logo {
display: flex;
align-items: center;
gap: var(--space-sm);
text-decoration: none;
color: var(--text-primary);
font-family: var(--font-heading);
font-weight: 800;
font-size: 1.5rem;
transition: var(--transition-normal);
}
.logo:hover {
transform: scale(1.05);
}
.logo-icon {
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 2rem;
}
.logo-text {
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.nav {
display: flex;
align-items: center;
gap: var(--space-lg);
}
.nav-link {
display: flex;
align-items: center;
gap: var(--space-xs);
color: var(--text-secondary);
font-weight: 500;
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-md);
transition: var(--transition-normal);
position: relative;
text-decoration: none;
}
.nav-link:hover,
.nav-link.active {
color: var(--text-primary);
background: var(--bg-glass);
transform: translateY(-2px);
}
.nav-link i {
font-size: 1.1rem;
}
.user-menu {
display: flex;
align-items: center;
gap: var(--space-md);
}
.credits {
display: flex;
align-items: center;
gap: var(--space-xs);
background: var(--gradient-accent);
color: var(--text-primary);
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-full);
font-size: 1rem;
font-weight: 600;
box-shadow: var(--shadow-light);
}
.notifications-btn,
.profile-btn,
.logout-btn {
display: flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-sm) var(--space-md);
background: var(--bg-glass);
color: var(--text-secondary);
text-decoration: none;
border-radius: var(--radius-md);
font-size: 1rem;
transition: var(--transition-normal);
position: relative;
border: 1px solid var(--border-light);
}
.notifications-btn:hover,
.profile-btn:hover,
.logout-btn:hover {
background: var(--bg-card);
color: var(--text-primary);
transform: translateY(-2px);
border-color: var(--border-accent);
}
.notification-badge {
position: absolute;
top: -5px;
right: -5px;
background: var(--gradient-secondary);
color: var(--text-primary);
font-size: 0.75rem;
padding: 0.2rem 0.5rem;
border-radius: var(--radius-full);
min-width: 18px;
text-align: center;
font-weight: 600;
}
/* Mobile menu */
.mobile-menu-toggle {
display: none;
background: none;
border: none;
color: var(--text-primary);
font-size: 1.5rem;
cursor: pointer;
padding: var(--space-sm);
}
/* Theme toggle (preserved from original) */
.theme-toggle {
position: fixed;
top: 50%;
right: 0;
transform: translateY(-50%);
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: var(--radius-md) 0 0 var(--radius-md);
padding: var(--space-md);
z-index: 999;
transition: var(--transition-normal);
opacity: 0;
transform: translateY(-50%) translateX(100%);
}
.theme-toggle.visible {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
.theme-toggle-btn {
background: var(--gradient-primary);
color: var(--text-primary);
border: none;
padding: var(--space-md);
border-radius: 50%;
cursor: pointer;
font-size: 1.5rem;
transition: var(--transition-normal);
}
.theme-toggle-btn:hover {
transform: scale(1.1);
box-shadow: var(--shadow-medium);
}
/* Responsive design */
@media (max-width: 768px) {
.nav {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--bg-primary);
border-top: 1px solid var(--border-light);
flex-direction: column;
padding: var(--space-md);
gap: var(--space-sm);
}
.nav.active {
display: flex;
}
.mobile-menu-toggle {
display: block;
}
.user-menu {
gap: var(--space-sm);
}
.credits,
.notifications-btn,
.profile-btn,
.logout-btn {
padding: var(--space-xs) var(--space-sm);
font-size: 0.9rem;
}
.theme-toggle {
top: auto;
bottom: 20px;
right: 20px;
transform: none;
border-radius: 50%;
padding: 0;
}
.theme-toggle.visible {
transform: none;
}
}
</style>
</head>
<body>
<!-- Header -->
<header class="header">
<div class="container">
<div class="header-content">
<!-- Logo -->
<a href="/" class="logo">
<i class="fas fa-music logo-icon"></i>
<span class="logo-text">SoundStudioPro</span>
</a>
<!-- Navigation -->
<nav class="nav" id="main-nav">
<?php if (isset($_SESSION['user_id'])): ?>
<!-- Logged in - Social Network Style -->
<a href="/" class="nav-link <?= $current_page === 'index' ? 'active' : '' ?>">
<i class="fas fa-home"></i>
<span>Home</span>
</a>
<a href="/create_music.php" class="nav-link <?= $current_page === 'create_music' ? 'active' : '' ?>">
<i class="fas fa-plus-circle"></i>
<span>Create</span>
</a>
<a href="/library.php" class="nav-link <?= $current_page === 'library_new' ? 'active' : '' ?>">
<i class="fas fa-music"></i>
<span>My Music</span>
</a>
<a href="/artists.php" class="nav-link <?= $current_page === 'artists' ? 'active' : '' ?>">
<i class="fas fa-users"></i>
<span>Artists</span>
</a>
<a href="/community.php" class="nav-link <?= $current_page === 'community' ? 'active' : '' ?>">
<i class="fas fa-comments"></i>
<span>Community</span>
</a>
<?php if (isset($_SESSION['is_admin']) && $_SESSION['is_admin']): ?>
<a href="/admin.html" class="nav-link">
<i class="fas fa-cog"></i>
<span>Admin</span>
</a>
<?php endif; ?>
<?php else: ?>
<!-- Not logged in - Marketing Style -->
<a href="/" class="nav-link <?= $current_page === 'index' ? 'active' : '' ?>">
<i class="fas fa-home"></i>
<span>Home</span>
</a>
<a href="/artists.php" class="nav-link <?= $current_page === 'artists' ? 'active' : '' ?>">
<i class="fas fa-users"></i>
<span>Artists</span>
</a>
<a href="/community.php" class="nav-link <?= $current_page === 'community' ? 'active' : '' ?>">
<i class="fas fa-comments"></i>
<span>Community</span>
</a>
<?php endif; ?>
</nav>
<!-- User Menu -->
<div class="user-menu">
<?php if (isset($_SESSION['user_id'])): ?>
<div class="credits">
<i class="fas fa-coins"></i>
<span><?= $_SESSION['credits'] ?? 5 ?></span>
</div>
<a href="/community.php" class="notifications-btn" title="Notifications">
<i class="fas fa-bell"></i>
<span class="notification-badge">3</span>
</a>
<a href="/artist_profile.php?id=<?= $_SESSION['user_id'] ?>" class="profile-btn">
<i class="fas fa-user"></i>
<span>Profile</span>
</a>
<a href="/profile_settings.php" class="profile-btn">
<i class="fas fa-cog"></i>
</a>
<a href="/auth/logout.php" class="logout-btn">
<i class="fas fa-sign-out-alt"></i>
<span>Logout</span>
</a>
<?php else: ?>
<a href="/auth/login.php" class="btn btn-secondary">
<i class="fas fa-sign-in-alt"></i>
<span>Login</span>
</a>
<a href="/auth/register.php" class="btn btn-primary">
<i class="fas fa-user-plus"></i>
<span>Sign Up</span>
</a>
<?php endif; ?>
</div>
<!-- Mobile Menu Toggle -->
<button class="mobile-menu-toggle" id="mobile-menu-toggle">
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</header>
<!-- Theme Toggle (Preserved from original) -->
<div class="theme-toggle" id="theme-toggle">
<button class="theme-toggle-btn" title="Change Theme">
🎨
</button>
</div>
<!-- Main Content -->
<main class="main-content" style="margin-top: 80px;">
<div class="container">