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();

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

// Get all users with completed tracks
$pdo = getDBConnection();
$stmt = $pdo->prepare("
    SELECT DISTINCT u.id, u.name as user_name, u.email, u.created_at,
           COUNT(mt.id) as track_count,
           MAX(mt.created_at) as last_track_date
    FROM users u
    LEFT JOIN music_tracks mt ON u.id = mt.user_id AND mt.status = 'complete'
    WHERE mt.id IS NOT NULL
    GROUP BY u.id, u.name, u.email, u.created_at
    ORDER BY track_count DESC, last_track_date DESC
");
$stmt->execute();
$artists = $stmt->fetchAll();

// Get featured tracks for each artist
$featured_tracks = [];
foreach ($artists as $artist) {
    $stmt = $pdo->prepare("
        SELECT * FROM music_tracks 
        WHERE user_id = ? AND status = 'complete' AND audio_url IS NOT NULL
        ORDER BY created_at DESC 
        LIMIT 1
    ");
    $stmt->execute([$artist['id']]);
    $track = $stmt->fetch();
    if ($track) {
        $featured_tracks[$artist['id']] = $track;
    }
}

// Set page variables for header
$page_title = 'Bands Directory - SoundStudioPro';
$page_description = 'Discover amazing AI music bands and artists. Explore tracks from talented creators in our community.';

// 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;
    }
    
    /* Bands Content */
    .bands-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;
    }
    
    .bands-container {
        max-width: 120rem;
            margin: 0 auto;
        }

    /* Bands Grid */
    .bands-grid {
            display: grid;
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 3rem;
        margin-bottom: 4rem;
        }

    .band-card {
            background: rgba(255, 255, 255, 0.05);
        padding: 4rem 3rem;
        border-radius: 24px;
        backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
        text-align: center;
    }
    
    .band-card:hover {
        transform: translateY(-10px);
        border-color: rgba(102, 126, 234, 0.3);
        box-shadow: 0 30px 80px rgba(102, 126, 234, 0.2);
    }
    
    .band-avatar {
        width: 10rem;
        height: 10rem;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea, #764ba2);
            display: flex;
            align-items: center;
            justify-content: center;
        font-size: 4rem;
        font-weight: 900;
        margin: 0 auto 2rem;
        color: white;
        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
    }
    
    .band-name {
        font-size: 2.4rem;
        font-weight: 700;
        margin-bottom: 1.5rem;
        color: white;
    }
    
    .band-stats {
            display: flex;
        justify-content: space-around;
        margin-bottom: 3rem;
        gap: 2rem;
    }
    
    .stat {
        text-align: center;
        flex: 1;
    }
    
    .stat-number {
        font-size: 2.8rem;
        font-weight: 900;
        color: #667eea;
            margin-bottom: 0.5rem;
        }

    .stat-label {
            font-size: 1.2rem;
            color: #a0aec0;
        font-weight: 500;
    }
    
    .view-profile-btn {
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: white;
        border: none;
        padding: 1.5rem 3rem;
        border-radius: 12px;
        font-size: 1.4rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-block;
    }
    
    .view-profile-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
    }
    
    /* Featured Track */
    .featured-track {
        background: rgba(102, 126, 234, 0.1);
        border: 1px solid rgba(102, 126, 234, 0.3);
        border-radius: 16px;
        padding: 2rem;
        margin-top: 2rem;
        text-align: left;
    }
    
    .featured-track-title {
        font-size: 1.8rem;
        font-weight: 600;
        color: white;
            margin-bottom: 1rem;
        }

    .featured-track-prompt {
        font-size: 1.4rem;
        color: #a0aec0;
        margin-bottom: 1.5rem;
        line-height: 1.5;
    }
    
    .track-actions {
            display: flex;
            gap: 1rem;
        flex-wrap: wrap;
        }

        .btn {
        padding: 1rem 2rem;
            border: none;
        border-radius: 12px;
            font-size: 1.4rem;
        font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
        gap: 0.8rem;
        }

        .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:hover {
            transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
    }
    
    /* Responsive */
    @media (max-width: 768px) {
        .hero-title {
            font-size: 4rem;
        }
        
        .bands-grid {
            grid-template-columns: 1fr;
        }
        
        .band-stats {
            flex-direction: column;
            gap: 1rem;
        }
        
        .track-actions {
            flex-direction: column;
        }
        }
    </style>

    <!-- Hero Section -->
<section class="hero">
    <div class="hero-content">
        <div class="hero-badge">🎵 Bands Directory</div>
        <h1 class="hero-title">Discover Amazing Bands</h1>
        <p class="hero-subtitle">Explore AI music creators and their latest tracks. Find your next favorite artist.</p>
        </div>
    </section>

<!-- Bands Content -->
<section class="bands-content">
    <div class="bands-container">
        <div class="bands-grid">
            <?php foreach ($artists as $artist): ?>
                <div class="band-card">
                    <div class="band-avatar">
                        <?= strtoupper(substr($artist['user_name'], 0, 1)) ?>
                    </div>
                    <h3 class="band-name"><?= htmlspecialchars($artist['user_name']) ?></h3>
                    
                    <div class="band-stats">
                        <div class="stat">
                            <div class="stat-number"><?= $artist['track_count'] ?></div>
                            <div class="stat-label">Tracks</div>
                        </div>
                        <div class="stat">
                            <div class="stat-number"><?= date('M Y', strtotime($artist['last_track_date'])) ?></div>
                            <div class="stat-label">Latest</div>
                        </div>
                    </div>

                    <?php if (isset($featured_tracks[$artist['id']])): ?>
                        <div class="featured-track">
                            <h4 class="featured-track-title"><?= htmlspecialchars($featured_tracks[$artist['id']]['title']) ?></h4>
                            <p class="featured-track-prompt"><?= htmlspecialchars($featured_tracks[$artist['id']]['prompt']) ?></p>
                            <div class="track-actions">
                                <button class="btn btn-primary" onclick="playTrack('<?= htmlspecialchars($featured_tracks[$artist['id']]['audio_url']) ?>', '<?= htmlspecialchars($featured_tracks[$artist['id']]['title']) ?>', '<?= htmlspecialchars($artist['user_name']) ?>')">
                                    <i class="fas fa-play"></i> Play
                                </button>
                                <a href="<?= htmlspecialchars($featured_tracks[$artist['id']]['audio_url']) ?>" class="btn btn-secondary" download>
                                    <i class="fas fa-download"></i> Download
                                </a>
                            </div>
                        </div>
                    <?php endif; ?>

                    <a href="/artist_profile.php?id=<?= $artist['id'] ?>" class="view-profile-btn">
                        <i class="fas fa-user"></i> View Profile
                    </a>
                </div>
            <?php endforeach; ?>
        </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>

<style>
    /* 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>

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

    // Play track
    function playTrack(audioUrl, title, artist) {
        if (currentAudio) {
            currentAudio.pause();
            currentAudio = null;
        }
        
        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'; ?>