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/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

<?php
session_start();

// Check if user is logged in
if (!isset($_SESSION['user_id'])) {
    header('Location: /auth/login.php');
    exit;
}

// Include database configuration
require_once 'config/database.php';

// Get user info
$user = getUserById($_SESSION['user_id']);
$user_name = $user['name'] ?? 'User';
$credits = $_SESSION['credits'] ?? 10;

// Get user stats
$user_stats = [
    'total_tracks' => 0,
    'completed_tracks' => 0,
    'processing_tracks' => 0
];

// Get user's music tracks
$music_tracks = getUserMusicTracks($_SESSION['user_id'], 50);
$user_stats['total_tracks'] = count($music_tracks);
$user_stats['completed_tracks'] = count(array_filter($music_tracks, function($track) {
    return $track['status'] === 'complete';
}));
$user_stats['processing_tracks'] = count(array_filter($music_tracks, function($track) {
    return $track['status'] === 'processing';
}));

// Get recent tracks (last 5)
$recent_tracks = array_slice($music_tracks, 0, 5);

// Set page variables for header
$page_title = 'Dashboard - SoundStudioPro';
$page_description = 'Your SoundStudioPro dashboard - Create, manage, and discover AI-generated music.';

// Include header
include 'includes/header.php';
?>

    <style>
    /* Main Content */
    .main-content {
        margin-top: 10rem;
        padding: 4rem 0;
        min-height: calc(100vh - 10rem);
    }
    
    /* Hero Section */
    .hero {
        padding: 8rem 0 6rem;
        text-align: center;
            color: white;
        background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
        position: relative;
        overflow: hidden;
            margin-bottom: 4rem;
        }

    .hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(102,126,234,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
        opacity: 0.3;
    }
    
    .hero-content {
        max-width: 90rem;
        margin: 0 auto;
        position: relative;
        z-index: 2;
    }
    
    .hero-badge {
        display: inline-block;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
            color: #667eea;
        padding: 1.2rem 2.4rem;
        border-radius: 50px;
        font-size: 1.4rem;
        font-weight: 600;
        margin-bottom: 3rem;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(102, 126, 234, 0.3);
    }
    
    .hero-title {
        font-size: 5.6rem;
        font-weight: 900;
        line-height: 1.1;
        margin-bottom: 2.4rem;
        background: linear-gradient(135deg, #ffffff, #667eea, #764ba2);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

    .hero-subtitle {
        font-size: 2rem;
        font-weight: 400;
        margin-bottom: 4rem;
        opacity: 0.9;
        max-width: 70rem;
        margin-left: auto;
        margin-right: auto;
            color: #a0aec0;
    }
    
    /* Dashboard Content */
    .dashboard-content {
        background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
        padding: 6rem 0;
        border-radius: 40px 40px 0 0;
        margin-top: -2rem;
        position: relative;
        z-index: 10;
    }
    
    .dashboard-container {
        max-width: 120rem;
        margin: 0 auto;
    }
    
    /* Stats Section */
    .stats-section {
        margin-bottom: 6rem;
    }
    
    .section-header {
        text-align: center;
            margin-bottom: 4rem;
        }
    
    .section-title {
        font-size: 4.8rem;
        font-weight: 700;
        color: white;
        margin-bottom: 1.5rem;
    }
    
    .section-subtitle {
        font-size: 2rem;
        color: #a0aec0;
        }

        .stats-grid {
            display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 3rem;
        }

        .stat-card {
        background: rgba(255, 255, 255, 0.05);
            padding: 3rem;
        border-radius: 20px;
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.1);
            text-align: center;
            transition: all 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-5px);
            border-color: rgba(102, 126, 234, 0.3);
        box-shadow: 0 20px 60px rgba(102, 126, 234, 0.1);
        }

        .stat-icon {
            font-size: 3rem;
            color: #667eea;
        margin-bottom: 1.5rem;
        }

        .stat-number {
        font-size: 4.8rem;
        font-weight: 900;
        color: #667eea;
        margin-bottom: 1rem;
        }

        .stat-label {
            color: #a0aec0;
        font-size: 1.8rem;
        font-weight: 500;
        }

    /* Quick Actions */
        .quick-actions {
        margin-bottom: 6rem;
        }

        .actions-grid {
            display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 3rem;
        }

        .action-card {
            background: rgba(255, 255, 255, 0.05);
        padding: 4rem;
        border-radius: 24px;
        backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        transition: all 0.3s ease;
            text-align: center;
            text-decoration: none;
            color: white;
        }

        .action-card:hover {
        transform: translateY(-10px);
            border-color: rgba(102, 126, 234, 0.3);
        box-shadow: 0 30px 80px rgba(102, 126, 234, 0.2);
        color: white;
        }

        .action-icon {
        font-size: 4rem;
            color: #667eea;
        margin-bottom: 2rem;
        }

        .action-title {
        font-size: 2.4rem;
        font-weight: 700;
        margin-bottom: 1.5rem;
        color: white;
        }

        .action-description {
        color: #a0aec0;
        font-size: 1.6rem;
        margin-bottom: 2rem;
        line-height: 1.6;
    }
    
    .action-btn {
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: white;
        border: none;
        padding: 1.5rem 3rem;
        border-radius: 12px;
        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 10px 30px rgba(102, 126, 234, 0.4);
    }
    
    /* Recent Tracks */
    .recent-tracks {
        margin-bottom: 6rem;
    }
    
    .tracks-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
        gap: 3rem;
    }
    
    .track-card {
            background: rgba(255, 255, 255, 0.05);
        padding: 3rem;
        border-radius: 20px;
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        transition: all 0.3s ease;
    }
    
    .track-card:hover {
        transform: translateY(-5px);
        border-color: rgba(102, 126, 234, 0.3);
        box-shadow: 0 20px 60px rgba(102, 126, 234, 0.1);
    }
    
    .track-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 2rem;
        }

        .track-title {
        font-size: 2rem;
        font-weight: 700;
        color: white;
            margin-bottom: 0.5rem;
        }

    .track-prompt {
        color: #a0aec0;
            font-size: 1.4rem;
        line-height: 1.5;
        }

        .track-status {
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-size: 1.2rem;
            font-weight: 600;
        }

        .status-complete {
        background: rgba(72, 187, 120, 0.2);
        color: #48bb78;
        }

        .status-processing {
            background: rgba(255, 193, 7, 0.2);
            color: #ffc107;
        }

        .status-failed {
            background: rgba(255, 0, 0, 0.2);
            color: #ff6b6b;
        }

    .track-details {
        display: flex;
        gap: 2rem;
        margin-bottom: 2rem;
        font-size: 1.4rem;
        color: #a0aec0;
    }
    
    .track-actions {
        display: flex;
        gap: 1rem;
    }
    
    .btn-small {
        padding: 1rem 2rem;
        border-radius: 8px;
        font-size: 1.4rem;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.3s ease;
        border: none;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .btn-small.btn-primary {
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: white;
    }
    
    .btn-small.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(-2px);
    }
    
    .empty-state {
            text-align: center;
        padding: 6rem 2rem;
            color: #a0aec0;
    }
    
    .empty-icon {
        font-size: 6rem;
        margin-bottom: 2rem;
        color: #667eea;
    }
    
    .empty-title {
        font-size: 2.4rem;
        color: white;
        margin-bottom: 1.5rem;
    }
    
    .empty-description {
        font-size: 1.6rem;
        margin-bottom: 3rem;
    }
    
    /* Responsive */
    @media (max-width: 768px) {
        .hero-title {
            font-size: 4rem;
        }
        
        .section-title {
            font-size: 3.2rem;
        }
        
            .stats-grid {
                grid-template-columns: 1fr;
            }
            
            .actions-grid {
                grid-template-columns: 1fr;
            }
            
        .tracks-grid {
            grid-template-columns: 1fr;
        }
    }

    /* Winamp-style Player */
    .winamp-container {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: linear-gradient(90deg, #2c3e50, #34495e);
        border-top: 2px solid #3498db;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.3);
    }

    .player-main {
        display: flex;
        align-items: center;
        padding: 10px 20px;
        height: 80px;
    }

    .player-controls {
        display: flex;
        align-items: center;
        gap: 15px;
        flex: 1;
    }

    .control-btn {
        background: #3498db;
        border: none;
        color: white;
        padding: 8px 12px;
        border-radius: 5px;
        cursor: pointer;
        transition: all 0.3s;
    }

    .control-btn:hover {
        background: #2980b9;
        transform: scale(1.05);
    }

    .play-btn {
        background: #27ae60;
        padding: 12px 16px;
        border-radius: 50%;
    }

    .play-btn:hover {
        background: #229954;
    }

    .track-info {
        flex: 1;
        margin: 0 20px;
    }

    .track-title {
        font-weight: bold;
        font-size: 14px;
        margin-bottom: 5px;
    }

    .track-artist {
        font-size: 12px;
        opacity: 0.8;
    }

    .progress-container {
        flex: 1;
        margin: 0 20px;
    }

    .progress-bar {
        width: 100%;
        height: 6px;
        background: #34495e;
        border-radius: 3px;
        overflow: hidden;
        cursor: pointer;
    }

    .progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #3498db, #27ae60);
        width: 0%;
        transition: width 0.1s;
    }

    .time-display {
        font-size: 12px;
        margin-top: 5px;
                text-align: center;
            }

    .volume-control {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-left: 20px;
    }

    .volume-slider {
        width: 80px;
        height: 4px;
        background: #34495e;
        border-radius: 2px;
        cursor: pointer;
        }
    </style>

<!-- Hero Section -->
<section class="hero">
    <div class="container">
        <div class="hero-content">
            <div class="hero-badge">🎵 Welcome Back</div>
            <h1 class="hero-title">Ready to Create Amazing Music?</h1>
            <p class="hero-subtitle">Your AI music creation dashboard. Generate professional tracks, manage your library, and discover new sounds with cutting-edge AI technology.</p>
        </div>
            </div>
</section>

<!-- Dashboard Content -->
<section class="dashboard-content">
    <div class="container">
        <div class="dashboard-container">
            <!-- Stats Section -->
            <div class="stats-section">
                <div class="section-header">
                    <h2 class="section-title">Your Music Stats</h2>
                    <p class="section-subtitle">Track your progress and see your music creation journey</p>
                </div>

        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-icon">
                    <i class="fas fa-music"></i>
                </div>
                <div class="stat-number"><?= $user_stats['total_tracks'] ?></div>
                <div class="stat-label">Total Tracks</div>
            </div>
            <div class="stat-card">
                <div class="stat-icon">
                    <i class="fas fa-check-circle"></i>
                </div>
                <div class="stat-number"><?= $user_stats['completed_tracks'] ?></div>
                <div class="stat-label">Completed</div>
            </div>
            <div class="stat-card">
                <div class="stat-icon">
                    <i class="fas fa-clock"></i>
                </div>
                <div class="stat-number"><?= $user_stats['processing_tracks'] ?></div>
                <div class="stat-label">Processing</div>
            </div>
            <div class="stat-card">
                <div class="stat-icon">
                    <i class="fas fa-coins"></i>
                </div>
                <div class="stat-number"><?= $credits ?></div>
                <div class="stat-label">Credits Left</div>
                    </div>
            </div>
        </div>

            <!-- Quick Actions -->
        <div class="quick-actions">
                <div class="section-header">
            <h2 class="section-title">Quick Actions</h2>
                    <p class="section-subtitle">Start creating and managing your music</p>
                </div>
                
            <div class="actions-grid">
                    <a href="/#create" class="action-card">
                        <div class="action-icon">🎵</div>
                        <div class="action-title">Create New Music</div>
                        <div class="action-description">Generate original AI music with custom prompts and styles. Create professional tracks in minutes.</div>
                        <div class="action-btn">
                            <i class="fas fa-plus"></i> Start Creating
                    </div>
                </a>
                
                <a href="/library.php" class="action-card">
                        <div class="action-icon">📚</div>
                        <div class="action-title">My Library</div>
                        <div class="action-description">View and manage all your created tracks. Play, download, and organize your music collection.</div>
                        <div class="action-btn">
                            <i class="fas fa-list"></i> View Library
                    </div>
                </a>
                
                <a href="/artists.php" class="action-card">
                        <div class="action-icon">👥</div>
                        <div class="action-title">Discover Artists</div>
                        <div class="action-description">Explore music from other creators. Get inspired and discover new sounds and styles.</div>
                        <div class="action-btn">
                            <i class="fas fa-users"></i> Browse Artists
                    </div>
                </a>
                
                <a href="/community.php" class="action-card">
                        <div class="action-icon">🌍</div>
                        <div class="action-title">Community</div>
                        <div class="action-description">Connect with other music creators. Share your work and get feedback from the community.</div>
                        <div class="action-btn">
                            <i class="fas fa-globe"></i> Join Community
                    </div>
                </a>
            </div>
        </div>

            <!-- Recent Tracks -->
        <div class="recent-tracks">
                <div class="section-header">
            <h2 class="section-title">Recent Tracks</h2>
                    <p class="section-subtitle">Your latest AI-generated tracks and creations</p>
                </div>
                
                <div class="tracks-grid">
                    <?php if (empty($recent_tracks)): ?>
                        <div class="empty-state" style="grid-column: 1 / -1;">
                            <div class="empty-icon">🎵</div>
                            <h3 class="empty-title">No tracks yet</h3>
                            <p class="empty-description">Start creating your first AI-generated music!</p>
                            <a href="/#create" class="btn btn-primary">
                                <i class="fas fa-plus"></i> Create Your First Track
                            </a>
                        </div>
                    <?php else: ?>
                        <?php foreach ($recent_tracks as $track): ?>
                        <div class="track-card">
                            <div class="track-header">
                                <div>
                            <div class="track-title"><?= htmlspecialchars($track['title']) ?></div>
                                    <div class="track-prompt"><?= htmlspecialchars(substr($track['prompt'], 0, 100)) ?>...</div>
                                </div>
                                <div class="track-status status-<?= $track['status'] ?>">
                                    <?= ucfirst($track['status']) ?>
                                </div>
                            </div>
                            
                            <div class="track-details">
                                <span><i class="fas fa-clock"></i> <?= $track['duration'] ?? 'N/A' ?>s</span>
                                <span><i class="fas fa-calendar"></i> <?= date('M j, Y', strtotime($track['created_at'])) ?></span>
                            </div>
                            
                            <div class="track-actions">
                                <?php if ($track['status'] === 'complete' && $track['audio_url']): ?>
                                    <button class="btn-small btn-primary" onclick="playTrack('<?= htmlspecialchars($track['audio_url']) ?>', '<?= htmlspecialchars($track['title']) ?>', '<?= htmlspecialchars($user_name) ?>')">
                                        <i class="fas fa-play"></i> Play
                                    </button>
                                    <a href="<?= htmlspecialchars($track['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>
        </div>
    </div>
    </section>

    <!-- Winamp-style Player -->
    <div class="winamp-container" id="player" style="display: none;">
        <div class="player-main">
            <div class="player-controls">
                <button class="control-btn" onclick="previousTrack()">
                    <i class="fas fa-step-backward"></i>
                </button>
                <button class="control-btn play-btn" id="playPauseBtn" onclick="togglePlay()">
                    <i class="fas fa-play" id="playIcon"></i>
                </button>
                <button class="control-btn" onclick="nextTrack()">
                    <i class="fas fa-step-forward"></i>
                </button>
            </div>
            
            <div class="track-info">
                <div class="track-title" id="currentTrackTitle">No track selected</div>
                <div class="track-artist" id="currentTrackArtist">SoundStudioPro</div>
            </div>
            
            <div class="progress-container">
                <div class="progress-bar" onclick="seek(event)">
                    <div class="progress-fill" id="progressFill"></div>
                </div>
                <div class="time-display">
                    <span id="currentTime">0:00</span> / <span id="totalTime">0:00</span>
                </div>
            </div>
            
            <div class="volume-control">
                <i class="fas fa-volume-up"></i>
                <div class="volume-slider" onclick="setVolume(event)">
                    <div style="width: 70%; height: 100%; background: #3498db;"></div>
                        </div>
                    </div>
        </div>
    </div>

    <script>
        let currentAudio = null;
        let currentTrackIndex = 0;
        let playlist = [];
        let isPlaying = false;

        // Initialize playlist from music tracks
        const musicTracks = <?= json_encode($music_tracks) ?>;
        playlist = musicTracks
            .filter(track => track.status === 'complete' && track.audio_url)
            .map((track, index) => ({
                index: index,
                title: track.title,
                artist: '<?= htmlspecialchars($user_name) ?>',
                audioUrl: track.audio_url
            }));

        // Play track
        function playTrack(audioUrl, title, artist) {
            if (currentAudio) {
                currentAudio.pause();
            }
            
            currentAudio = new Audio(audioUrl);
            currentAudio.addEventListener('loadedmetadata', () => {
                document.getElementById('totalTime').textContent = formatTime(currentAudio.duration);
            });
            
            currentAudio.addEventListener('timeupdate', () => {
                const progress = (currentAudio.currentTime / currentAudio.duration) * 100;
                document.getElementById('progressFill').style.width = progress + '%';
                document.getElementById('currentTime').textContent = formatTime(currentAudio.currentTime);
            });
            
            currentAudio.addEventListener('ended', () => {
                nextTrack();
            });
            
            // Auto-play disabled - user must click play button
            // currentAudio.play();
            // isPlaying = true;
            
                    document.getElementById('currentTrackTitle').textContent = title;
        document.getElementById('currentTrackArtist').textContent = artist;
        document.getElementById('playIcon').className = 'fas fa-play'; // Show play button since auto-play is disabled
            
            // Show player
            document.getElementById('player').style.display = 'block';
            
            // Update current track index
            currentTrackIndex = playlist.findIndex(track => track.audioUrl === audioUrl);
        }

        // Toggle play/pause
        function togglePlay() {
            if (!currentAudio) return;
            
            if (isPlaying) {
                currentAudio.pause();
                document.getElementById('playIcon').className = 'fas fa-play';
            } else {
                currentAudio.play();
                document.getElementById('playIcon').className = 'fas fa-pause';
            }
            isPlaying = !isPlaying;
        }

        // Next track
        function nextTrack() {
            if (playlist.length === 0) return;
            currentTrackIndex = (currentTrackIndex + 1) % playlist.length;
            const track = playlist[currentTrackIndex];
            playTrack(track.audioUrl, track.title, track.artist);
        }

        // Previous track
        function previousTrack() {
            if (playlist.length === 0) return;
            currentTrackIndex = currentTrackIndex === 0 ? playlist.length - 1 : currentTrackIndex - 1;
            const track = playlist[currentTrackIndex];
            playTrack(track.audioUrl, track.title, track.artist);
        }

        // Seek in track
        function seek(event) {
            if (!currentAudio) return;
            
            const rect = event.target.getBoundingClientRect();
            const clickX = event.clientX - rect.left;
            const width = rect.width;
            const seekTime = (clickX / width) * currentAudio.duration;
            currentAudio.currentTime = seekTime;
        }

        // Set volume
        function setVolume(event) {
            if (!currentAudio) return;
            
            const rect = event.target.getBoundingClientRect();
            const clickX = event.clientX - rect.left;
            const width = rect.width;
            const volume = clickX / width;
            currentAudio.volume = volume;
        }

        // Format time
        function formatTime(seconds) {
            const mins = Math.floor(seconds / 60);
            const secs = Math.floor(seconds % 60);
            return `${mins}:${secs.toString().padStart(2, '0')}`;
        }
    </script>

    <?php include 'includes/footer.php'; ?>