 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/ |
<?php
// Configure secure session cookies BEFORE starting session
ini_set('session.cookie_httponly', 1);
ini_set('session.cookie_secure', (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 1 : 0);
ini_set('session.cookie_samesite', 'Lax');
ini_set('session.use_strict_mode', 1);
ini_set('session.use_cookies', 1);
ini_set('session.use_only_cookies', 1);
session_start();
// Include security tracking
require_once 'includes/security_tracking.php';
// Include translation system
require_once 'includes/translations.php';
// Include site settings helper
require_once 'includes/site_settings_helper.php';
// Handle AJAX requests
$is_ajax = isset($_GET['ajax']) && $_GET['ajax'] == '1';
// Homepage SEO metadata
$page_title = 'Sound Studio Pro - Free AI Music Generator | SoundStudioPro';
$page_description = 'Sound Studio Pro - Create royalty-free beats, songs, and stems in minutes with our AI-powered music studio. Start free, collaborate with 50,000+ creators, and upgrade only when you need more.';
$current_page = 'index';
// Enhanced OG meta tags for homepage
$og_title = 'Free AI Music Generator Software - Create Professional Music Instantly | SoundStudioPro';
$og_description = 'Generate professional AI music for free. Create beats, songs & tracks in any genre with our advanced AI music generator. Used by 50,000+ creators worldwide. Commercial license included!';
// SECURITY: Sanitize HTTP_HOST to prevent host header injection
$host_raw = $_SERVER['HTTP_HOST'] ?? 'soundstudiopro.com';
$host = preg_replace('/[^a-zA-Z0-9.\-:]/', '', $host_raw); // Allow only alphanumeric, dots, hyphens, colons
$host = substr($host, 0, 253); // Limit length (max domain name length)
if (empty($host)) {
$host = 'soundstudiopro.com'; // Fallback if sanitization removes everything
}
$og_image = 'https://' . $host . '/assets/images/og-image.png';
$og_type = 'website';
// Twitter optimization
$twitter_title = 'Free AI Music Generator - Create Professional Beats & Songs Instantly';
$twitter_description = 'Best free AI music software for creating professional tracks. Generate beats, songs & music in any genre with advanced AI. Start creating now!';
// Additional SEO meta tags with comprehensive keywords
$additional_meta = [
'author' => 'SoundStudioPro Team',
'copyright' => 'SoundStudioPro',
'robots' => 'index, follow, max-image-preview:large',
'application-name' => 'SoundStudioPro',
'theme-color' => '#667eea',
'msapplication-TileColor' => '#667eea',
'apple-mobile-web-app-title' => 'SoundStudioPro',
'apple-mobile-web-app-capable' => 'yes',
'keywords' => 'Sound Studio, Sound Studio Pro, SoundStudio, soundstudio, AI music generator, free AI music generator, AI music software, music production software, beat maker software, AI song generator, royalty free music, music creation software, AI music composer, online music maker, free music software, AI beat maker, music generator app, artificial intelligence music, automated music creation, AI music platform, music studio software, digital music creator, AI music technology, music composition software, free music production tools, best AI music generator 2024, professional music creator, AI music maker free, music generator online, create music with AI, generate music AI, AI music creation, music for YouTube, podcast music, background music generator, commercial music license, stock music AI'
];
// Include header only for full page loads
if (!$is_ajax) {
include 'includes/header.php';
// Add advanced SEO meta tags and structured data for homepage
// Add additional meta tags for enhanced SEO
foreach ($additional_meta as $name => $content) {
echo '<meta name="' . htmlspecialchars($name) . '" content="' . htmlspecialchars($content) . '">';
}
// Homepage-specific JSON-LD structured data
$homepage_schema = [
"@context" => "https://schema.org",
"@type" => "WebSite",
"name" => "SoundStudioPro - AI Music Generation Platform",
"description" => "Professional AI music creation software for generating original tracks, beats, and songs with advanced artificial intelligence technology",
"url" => "https://soundstudiopro.com",
"potentialAction" => [
"@type" => "SearchAction",
"target" => [
"@type" => "EntryPoint",
"urlTemplate" => "https://soundstudiopro.com/community_fixed.php?search={search_term}"
],
"query-input" => "required name=search_term"
],
"publisher" => [
"@type" => "Organization",
"name" => "SoundStudioPro",
"logo" => [
"@type" => "ImageObject",
"url" => "https://soundstudiopro.com/assets/images/logo.png"
]
]
];
echo '<script type="application/ld+json">' . json_encode($homepage_schema, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES) . '</script>';
// Organization schema
$organization_schema = [
"@context" => "https://schema.org",
"@type" => "Organization",
"name" => "SoundStudioPro",
"alternateName" => ["SoundStudioPro", "Sound Studio Pro", "Sound Studio", "SoundStudio"],
"description" => "Leading AI music creation platform for professional track generation",
"url" => "https://soundstudiopro.com",
"logo" => "https://soundstudiopro.com/assets/images/logo.png",
"foundingDate" => "2024",
"founder" => [
"@type" => "Organization",
"name" => "SoundStudioPro Team"
],
"address" => [
"@type" => "PostalAddress",
"addressCountry" => "US"
],
"contactPoint" => [
"@type" => "ContactPoint",
"contactType" => "customer support",
"url" => "https://soundstudiopro.com/contact.php"
],
"sameAs" => [
"https://facebook.com/SoundStudioProOfficial"
]
];
echo '<script type="application/ld+json">' . json_encode($organization_schema, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES) . '</script>';
// Product schema for the software
$product_schema = [
"@context" => "https://schema.org",
"@type" => "SoftwareApplication",
"name" => "SoundStudioPro AI Music Generator",
"description" => "Professional AI music creation software for generating original tracks, beats, and songs with advanced artificial intelligence technology",
"applicationCategory" => "MusicApplication",
"operatingSystem" => ["Windows", "macOS", "Linux", "Web Browser", "iOS", "Android"],
"downloadUrl" => "https://soundstudiopro.com",
"softwareVersion" => "2.0",
"releaseNotes" => "Advanced AI music generation with improved quality and new features",
"offers" => [
[
"@type" => "Offer",
"price" => "0",
"priceCurrency" => "USD",
"description" => "Free AI Music Generation tier",
"availability" => "https://schema.org/InStock"
],
[
"@type" => "Offer",
"price" => "9.99",
"priceCurrency" => "USD",
"description" => "Creator tier with extended credits",
"availability" => "https://schema.org/InStock"
]
],
"features" => [
"AI Music Generation",
"Beat Making",
"Song Creation",
"Royalty-Free Music",
"Multiple Genres",
"High-Quality Audio",
"Real-time Preview",
"Community Sharing",
"Commercial License",
"Instant Download"
],
"screenshot" => "https://soundstudiopro.com/assets/images/app-screenshot.png",
"author" => [
"@type" => "Organization",
"name" => "SoundStudioPro"
]
];
echo '<script type="application/ld+json">' . json_encode($product_schema, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES) . '</script>';
// FAQ Schema for homepage
$current_lang = getCurrentLanguage();
$faq_schema = [
"@context" => "https://schema.org",
"@type" => "FAQPage",
"mainEntity" => [
[
"@type" => "Question",
"name" => t('faq.q1.question'),
"acceptedAnswer" => [
"@type" => "Answer",
"text" => t('faq.q1.answer')
]
],
[
"@type" => "Question",
"name" => t('faq.q2.question'),
"acceptedAnswer" => [
"@type" => "Answer",
"text" => t('faq.q2.answer')
]
],
[
"@type" => "Question",
"name" => t('faq.q3.question'),
"acceptedAnswer" => [
"@type" => "Answer",
"text" => t('faq.q3.answer')
]
],
[
"@type" => "Question",
"name" => t('faq.q4.question'),
"acceptedAnswer" => [
"@type" => "Answer",
"text" => t('faq.q4.answer')
]
],
[
"@type" => "Question",
"name" => t('faq.q5.question'),
"acceptedAnswer" => [
"@type" => "Answer",
"text" => t('faq.q5.answer')
]
],
[
"@type" => "Question",
"name" => t('faq.q6.question'),
"acceptedAnswer" => [
"@type" => "Answer",
"text" => t('faq.q6.answer')
]
]
],
"inLanguage" => $current_lang
];
echo '<script type="application/ld+json">' . json_encode($faq_schema, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) . '</script>';
}
// Global player is included via footer.php
// Include database for feed data
require_once 'config/database.php';
require_once 'utils/audio_token.php';
// Get current user
$user_id = $_SESSION['user_id'] ?? null;
$pdo = getDBConnection();
// Fetch data for three-column feed
$for_you_tracks = [];
$suggested_creators = [];
$trending_tracks = [];
if ($pdo) {
try {
// For You: Personalized tracks (from followed artists or popular if not logged in)
if ($user_id) {
$stmt = $pdo->prepare("
SELECT
mt.id,
mt.title,
mt.audio_url,
mt.duration,
mt.created_at,
mt.metadata,
mt.genre,
mt.image_url,
mt.task_id,
u.name as artist_name,
u.id as artist_id,
COALESCE(play_stats.play_count, 0) as play_count,
COALESCE(like_stats.like_count, 0) as like_count,
COALESCE(comment_stats.comment_count, 0) as comment_count,
(SELECT COUNT(*) FROM track_likes tl WHERE tl.track_id = mt.id AND tl.user_id = ?) as user_liked
FROM music_tracks mt
JOIN users u ON mt.user_id = u.id
LEFT JOIN user_follows uf ON uf.following_id = mt.user_id AND uf.follower_id = ?
LEFT JOIN (SELECT track_id, COUNT(*) as play_count FROM track_plays GROUP BY track_id) play_stats ON mt.id = play_stats.track_id
LEFT JOIN (SELECT track_id, COUNT(*) as like_count FROM track_likes GROUP BY track_id) like_stats ON mt.id = like_stats.track_id
LEFT JOIN (SELECT track_id, COUNT(*) as comment_count FROM track_comments GROUP BY track_id) comment_stats ON mt.id = comment_stats.track_id
WHERE mt.status = 'complete'
AND mt.audio_url IS NOT NULL
AND mt.audio_url != ''
AND mt.is_public = TRUE
AND (uf.follower_id IS NOT NULL OR mt.user_id = ?)
ORDER BY COALESCE(mt.published_at, mt.created_at) DESC
LIMIT 5
");
$stmt->execute([$user_id, $user_id, $user_id]);
} else {
$stmt = $pdo->prepare("
SELECT
mt.id,
mt.title,
mt.audio_url,
mt.duration,
mt.created_at,
mt.metadata,
mt.genre,
mt.image_url,
mt.task_id,
u.name as artist_name,
u.id as artist_id,
COALESCE(play_stats.play_count, 0) as play_count,
COALESCE(like_stats.like_count, 0) as like_count,
COALESCE(comment_stats.comment_count, 0) as comment_count,
0 as user_liked
FROM music_tracks mt
JOIN users u ON mt.user_id = u.id
LEFT JOIN (SELECT track_id, COUNT(*) as play_count FROM track_plays GROUP BY track_id) play_stats ON mt.id = play_stats.track_id
LEFT JOIN (SELECT track_id, COUNT(*) as like_count FROM track_likes GROUP BY track_id) like_stats ON mt.id = like_stats.track_id
LEFT JOIN (SELECT track_id, COUNT(*) as comment_count FROM track_comments GROUP BY track_id) comment_stats ON mt.id = comment_stats.track_id
WHERE mt.status = 'complete'
AND mt.audio_url IS NOT NULL
AND mt.audio_url != ''
AND mt.is_public = TRUE
ORDER BY (COALESCE(play_stats.play_count, 0) * 2 + COALESCE(like_stats.like_count, 0)) DESC
LIMIT 5
");
$stmt->execute();
}
$for_you_tracks = $stmt->fetchAll(PDO::FETCH_ASSOC);
// Suggested Creators: Users to follow
if ($user_id) {
$stmt = $pdo->prepare("
SELECT
u.id,
u.name,
COALESCE(NULLIF(up.profile_image, ''), NULLIF(u.profile_image, ''), NULL) as profile_image,
COALESCE(up.profile_position, 'center center') as profile_position,
COALESCE(follower_stats.followers_count, 0) as followers_count,
COALESCE(track_stats.track_count, 0) as track_count
FROM users u
LEFT JOIN user_profiles up ON u.id = up.user_id
LEFT JOIN (SELECT following_id, COUNT(*) as followers_count FROM user_follows GROUP BY following_id) follower_stats ON u.id = follower_stats.following_id
LEFT JOIN (SELECT user_id, COUNT(*) as track_count FROM music_tracks WHERE status = 'complete' GROUP BY user_id) track_stats ON u.id = track_stats.user_id
WHERE u.id NOT IN (
SELECT COALESCE(following_id, 0) FROM user_follows WHERE follower_id = ?
) AND u.id != ?
AND EXISTS (
SELECT 1 FROM music_tracks mt
WHERE mt.user_id = u.id
AND mt.status = 'complete'
AND mt.is_public = TRUE
)
ORDER BY followers_count DESC, track_count DESC
LIMIT 5
");
$stmt->execute([$user_id, $user_id]);
} else {
$stmt = $pdo->prepare("
SELECT
u.id,
u.name,
COALESCE(NULLIF(up.profile_image, ''), NULLIF(u.profile_image, ''), NULL) as profile_image,
COALESCE(up.profile_position, 'center center') as profile_position,
COALESCE(follower_stats.followers_count, 0) as followers_count,
COALESCE(track_stats.track_count, 0) as track_count
FROM users u
LEFT JOIN user_profiles up ON u.id = up.user_id
LEFT JOIN (SELECT following_id, COUNT(*) as followers_count FROM user_follows GROUP BY following_id) follower_stats ON u.id = follower_stats.following_id
LEFT JOIN (SELECT user_id, COUNT(*) as track_count FROM music_tracks WHERE status = 'complete' GROUP BY user_id) track_stats ON u.id = track_stats.user_id
WHERE EXISTS (
SELECT 1 FROM music_tracks mt
WHERE mt.user_id = u.id
AND mt.status = 'complete'
AND mt.is_public = TRUE
)
ORDER BY followers_count DESC, track_count DESC
LIMIT 5
");
$stmt->execute();
}
$suggested_creators = $stmt->fetchAll(PDO::FETCH_ASSOC);
// Format profile images for suggested creators
foreach ($suggested_creators as &$creator) {
$creator['profile_image'] = formatProfileImage($creator['profile_image'], $creator['name']);
}
unset($creator);
// OPTIMIZED: Using JOINs instead of correlated subqueries for better performance
// Trending: Popular tracks by plays and likes
if ($user_id) {
$stmt = $pdo->prepare("
SELECT
mt.id,
mt.title,
mt.audio_url,
mt.duration,
mt.created_at,
mt.metadata,
mt.genre,
mt.image_url,
mt.task_id,
u.name as artist_name,
u.id as artist_id,
COALESCE(play_stats.play_count, 0) as play_count,
COALESCE(like_stats.like_count, 0) as like_count,
COALESCE(comment_stats.comment_count, 0) as comment_count,
(SELECT COUNT(*) FROM track_likes tl WHERE tl.track_id = mt.id AND tl.user_id = ?) as user_liked
FROM music_tracks mt
JOIN users u ON mt.user_id = u.id
LEFT JOIN (SELECT track_id, COUNT(*) as play_count FROM track_plays GROUP BY track_id) play_stats ON mt.id = play_stats.track_id
LEFT JOIN (SELECT track_id, COUNT(*) as like_count FROM track_likes GROUP BY track_id) like_stats ON mt.id = like_stats.track_id
LEFT JOIN (SELECT track_id, COUNT(*) as comment_count FROM track_comments GROUP BY track_id) comment_stats ON mt.id = comment_stats.track_id
WHERE mt.status = 'complete'
AND mt.audio_url IS NOT NULL
AND mt.audio_url != ''
AND mt.is_public = TRUE
AND COALESCE(mt.published_at, mt.created_at) >= DATE_SUB(NOW(), INTERVAL 7 DAY)
ORDER BY (COALESCE(play_stats.play_count, 0) * 2 + COALESCE(like_stats.like_count, 0)) DESC
LIMIT 5
");
$stmt->execute([$user_id]);
} else {
$stmt = $pdo->prepare("
SELECT
mt.id,
mt.title,
mt.audio_url,
mt.duration,
mt.created_at,
mt.metadata,
mt.genre,
mt.image_url,
mt.task_id,
u.name as artist_name,
u.id as artist_id,
COALESCE(play_stats.play_count, 0) as play_count,
COALESCE(like_stats.like_count, 0) as like_count,
COALESCE(comment_stats.comment_count, 0) as comment_count,
0 as user_liked
FROM music_tracks mt
JOIN users u ON mt.user_id = u.id
LEFT JOIN (SELECT track_id, COUNT(*) as play_count FROM track_plays GROUP BY track_id) play_stats ON mt.id = play_stats.track_id
LEFT JOIN (SELECT track_id, COUNT(*) as like_count FROM track_likes GROUP BY track_id) like_stats ON mt.id = like_stats.track_id
LEFT JOIN (SELECT track_id, COUNT(*) as comment_count FROM track_comments GROUP BY track_id) comment_stats ON mt.id = comment_stats.track_id
WHERE mt.status = 'complete'
AND mt.audio_url IS NOT NULL
AND mt.audio_url != ''
AND mt.is_public = TRUE
AND COALESCE(mt.published_at, mt.created_at) >= DATE_SUB(NOW(), INTERVAL 7 DAY)
ORDER BY (COALESCE(play_stats.play_count, 0) * 2 + COALESCE(like_stats.like_count, 0)) DESC
LIMIT 5
");
$stmt->execute();
}
$trending_tracks = $stmt->fetchAll(PDO::FETCH_ASSOC);
// Process tracks: get signed URLs and resolve images
foreach ($for_you_tracks as &$track) {
if (!empty($track['audio_url'])) {
$track['signed_audio_url'] = getSignedAudioUrl($track['id'], $user_id);
}
// Resolve image from all possible sources
$track['image_url'] = resolveTrackImage($track);
}
unset($track);
foreach ($trending_tracks as &$track) {
if (!empty($track['audio_url'])) {
$track['signed_audio_url'] = getSignedAudioUrl($track['id'], $user_id);
}
// Resolve image from all possible sources
$track['image_url'] = resolveTrackImage($track);
}
unset($track);
} catch (Exception $e) {
error_log('Error fetching feed data: ' . $e->getMessage());
}
}
// Helper function to resolve track image URL from all possible sources
function resolveTrackImage($track) {
$imageUrl = $track['image_url'] ?? null;
// Clean and normalize image_url if it exists
if ($imageUrl) {
$imageUrl = trim($imageUrl);
if ($imageUrl === '' || strtolower($imageUrl) === 'null' || strtolower($imageUrl) === 'null') {
$imageUrl = null;
}
}
// If image_url exists and is not empty/null, normalize and use it
if (!empty($imageUrl)) {
// Normalize local paths (add leading / if missing)
if (!preg_match('/^https?:\/\//', $imageUrl)) {
if (!str_starts_with($imageUrl, '/')) {
$imageUrl = '/' . ltrim($imageUrl, '/');
}
return $imageUrl;
}
// If it's external, use it as-is
return $imageUrl;
}
// Only if image_url is empty/null, try fallback sources
if (!empty($track['metadata'])) {
try {
$metadata = is_string($track['metadata']) ? json_decode($track['metadata'], true) : $track['metadata'];
if ($metadata && is_array($metadata)) {
// Check multiple possible locations in metadata
if (isset($metadata['image_url']) && !empty($metadata['image_url'])) {
$metaImageUrl = $metadata['image_url'];
// Only use if it's a local path (metadata might have external URLs)
if (strpos($metaImageUrl, 'http://') !== 0 && strpos($metaImageUrl, 'https://') !== 0) {
if (!str_starts_with($metaImageUrl, '/')) {
$metaImageUrl = '/' . ltrim($metaImageUrl, '/');
}
return $metaImageUrl;
}
} elseif (isset($metadata['cover_url']) && !empty($metadata['cover_url'])) {
$metaCoverUrl = $metadata['cover_url'];
// Only use if it's a local path
if (strpos($metaCoverUrl, 'http://') !== 0 && strpos($metaCoverUrl, 'https://') !== 0) {
if (!str_starts_with($metaCoverUrl, '/')) {
$metaCoverUrl = '/' . ltrim($metaCoverUrl, '/');
}
return $metaCoverUrl;
}
} elseif (isset($metadata['raw_callback']['image_url']) && !empty($metadata['raw_callback']['image_url'])) {
$metaImageUrl = $metadata['raw_callback']['image_url'];
if (strpos($metaImageUrl, 'http://') !== 0 && strpos($metaImageUrl, 'https://') !== 0) {
if (!str_starts_with($metaImageUrl, '/')) {
$metaImageUrl = '/' . ltrim($metaImageUrl, '/');
}
return $metaImageUrl;
}
} elseif (isset($metadata['raw_callback']['cover_url']) && !empty($metadata['raw_callback']['cover_url'])) {
$metaCoverUrl = $metadata['raw_callback']['cover_url'];
if (strpos($metaCoverUrl, 'http://') !== 0 && strpos($metaCoverUrl, 'https://') !== 0) {
if (!str_starts_with($metaCoverUrl, '/')) {
$metaCoverUrl = '/' . ltrim($metaCoverUrl, '/');
}
return $metaCoverUrl;
}
}
}
} catch (Exception $e) {
error_log('Error parsing metadata for image URL: ' . $e->getMessage());
}
}
// Try to find image file by task_id pattern
if (!empty($track['task_id'])) {
$uploadsDir = $_SERVER['DOCUMENT_ROOT'] . '/uploads/track_covers/';
if (is_dir($uploadsDir)) {
$pattern = $uploadsDir . "track_{$track['task_id']}_*";
$files = glob($pattern);
if (!empty($files)) {
$mostRecent = end($files);
return '/uploads/track_covers/' . basename($mostRecent);
}
}
}
// Fallback to default only if no image found
return '/assets/images/default-track.jpg';
}
// Helper function to format numbers with K notation
function formatNumberK($num) {
$num = (int)$num;
if ($num >= 1000000) {
return round($num / 1000000, 1) . 'M';
} elseif ($num >= 1000) {
return round($num / 1000, 1) . 'K';
}
return (string)$num;
}
// Helper function to format profile image
function formatProfileImage($profile_image, $name) {
// If no profile image, return null (will use initials)
if (empty($profile_image)) {
return null;
}
// Trim whitespace
$profile_image = trim($profile_image);
// If it's already a full URL (http/https), return as is
if (preg_match('/^https?:\/\//i', $profile_image)) {
return $profile_image;
}
// If it starts with /, it's a valid relative path
if (strpos($profile_image, '/') === 0) {
return $profile_image;
}
// If it looks like a file path but doesn't start with /, try to fix it
// Check if it contains common image extensions
if (preg_match('/\.(jpg|jpeg|png|gif|webp)$/i', $profile_image)) {
// If it's in uploads directory, add leading slash
if (strpos($profile_image, 'uploads/') !== false || strpos($profile_image, 'profile') !== false) {
// Check if it already has a directory structure
if (strpos($profile_image, '/') === false) {
// It's just a filename, assume it's in uploads/profile_images/
return '/uploads/profile_images/' . $profile_image;
} else {
// It has a path but no leading slash
return '/' . ltrim($profile_image, '/');
}
}
// If it starts with a directory name (like 'ds/'), try to construct proper path
if (preg_match('/^[a-z0-9_]+\//i', $profile_image)) {
// This might be a malformed path, try to find it in uploads
$filename = basename($profile_image);
return '/uploads/profile_images/' . $filename;
}
}
// If we can't determine a valid image path, return null (will use initials)
return null;
}
// Helper function to extract genre from metadata
function extractGenre($track) {
if (!empty($track['genre'])) {
return $track['genre'];
}
if (!empty($track['metadata'])) {
$metadata = is_string($track['metadata']) ? json_decode($track['metadata'], true) : $track['metadata'];
if (isset($metadata['genre'])) return $metadata['genre'];
if (isset($metadata['style'])) return $metadata['style'];
}
return 'Electronic';
}
?>
<div class="container" id="pageContainer">
<div class="main-content">
<style>
/* Reset & Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
scroll-behavior: smooth;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: #1a202c;
background: #0a0a0a;
min-height: 100vh;
overflow-x: hidden;
padding-bottom: 120px; /* Increased space to prevent button overlap */
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #1a1a1a;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 4px;
}
/* Container & Layout */
.container {
max-width: 140rem;
margin: 0 auto;
padding: 0 2rem;
}
/* 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;
}
.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: 2rem;
backdrop-filter: blur(10px);
border: 1px solid rgba(102, 126, 234, 0.3);
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.hero-title {
font-size: 7.2rem;
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;
animation: gradientShift 3s ease-in-out infinite;
}
@keyframes gradientShift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.hero-subtitle {
font-size: 2.4rem;
font-weight: 400;
margin-bottom: 3rem;
opacity: 0.9;
max-width: 70rem;
margin-left: auto;
margin-right: auto;
color: #a0aec0;
}
.hero-actions {
display: flex;
gap: 2rem;
justify-content: center;
flex-wrap: wrap;
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
gap: 1rem;
padding: 2rem 4rem;
border-radius: 16px;
font-size: 1.6rem;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
border: none;
cursor: pointer;
position: relative;
overflow: hidden;
}
.btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 20px 50px rgba(102, 126, 234, 0.4);
}
.btn-secondary {
background: rgba(255, 255, 255, 0.1);
color: white;
border: 2px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
}
.btn-secondary:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-3px);
border-color: rgba(255, 255, 255, 0.3);
}
/* Music Creation Interface */
.music-creator {
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
padding: 8rem 0;
border-radius: 40px 40px 0 0;
margin-top: -4rem;
position: relative;
z-index: 10;
}
/* Create Music Section */
.create-music-section {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.15), rgba(118, 75, 162, 0.15));
border-radius: 24px;
padding: 4rem;
margin-bottom: 4rem;
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
position: relative;
overflow: hidden;
}
.create-music-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, #667eea, #764ba2, #667eea);
animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
0%, 100% { transform: translateX(-100%); }
50% { transform: translateX(100%); }
}
.create-music-header {
text-align: center;
margin-bottom: 3rem;
}
.section-title {
font-size: 3.2rem;
font-weight: 700;
color: white;
margin-bottom: 1rem;
}
.section-subtitle {
font-size: 1.6rem;
color: #a0aec0;
}
.create-music-form {
max-width: 90rem;
margin: 0 auto;
}
/* Mode Selector */
.mode-selector {
display: flex;
gap: 1rem;
margin-bottom: 3rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 0.5rem;
}
.mode-option {
flex: 1;
padding: 1.5rem;
border-radius: 8px;
cursor: pointer;
text-align: center;
transition: all 0.3s ease;
background: transparent;
border: 2px solid transparent;
}
.mode-option.active {
background: linear-gradient(135deg, #667eea, #764ba2);
border-color: rgba(102, 126, 234, 0.3);
transform: translateY(-2px);
}
.mode-option i {
font-size: 2rem;
margin-bottom: 0.5rem;
display: block;
}
.mode-option span {
display: block;
font-size: 1.6rem;
font-weight: 600;
color: white;
margin-bottom: 0.3rem;
}
.mode-option small {
font-size: 1.2rem;
color: #a0aec0;
}
.mode-option.active small {
color: rgba(255, 255, 255, 0.8);
}
.mode-cost {
font-size: 1.2rem;
font-weight: 600;
color: #ffc107;
margin-top: 0.5rem;
padding: 0.3rem 0.8rem;
background: rgba(255, 193, 7, 0.1);
border-radius: 6px;
border: 1px solid rgba(255, 193, 7, 0.2);
}
.mode-option.active .mode-cost {
background: rgba(255, 193, 7, 0.2);
border-color: rgba(255, 193, 7, 0.4);
}
/* Pro Mode Styles */
.pro-mode-header {
background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 152, 0, 0.1));
border: 2px solid rgba(255, 193, 7, 0.3);
border-radius: 16px;
padding: 2rem;
margin-bottom: 3rem;
text-align: center;
}
.pro-mode-header h3 {
color: #ffc107;
font-size: 2.4rem;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
}
.pro-mode-header p {
color: #a0aec0;
font-size: 1.4rem;
margin: 0;
}
.pro-section {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 2rem;
margin-bottom: 2rem;
}
.pro-section h4 {
color: #ffc107;
font-size: 1.8rem;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.8rem;
border-bottom: 1px solid rgba(255, 193, 7, 0.2);
padding-bottom: 0.8rem;
}
.pro-section h4 i {
font-size: 1.6rem;
}
/* Credit Cost Styling */
.credit-cost-display {
transition: all 0.3s ease;
}
.credit-cost-display.advanced-cost {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
border-color: rgba(102, 126, 234, 0.4);
color: #667eea;
}
.credit-cost-display.pro-cost {
background: linear-gradient(135deg, rgba(255, 193, 7, 0.2), rgba(255, 152, 0, 0.2));
border-color: rgba(255, 193, 7, 0.4);
color: #ffc107;
}
.credit-cost-display.advanced-cost .cost-label,
.credit-cost-display.pro-cost .cost-label {
font-weight: 600;
}
/* Form Modes */
.form-mode {
display: none;
animation: fadeIn 0.3s ease;
}
.form-mode.active {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.form-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.form-group {
margin-bottom: 2rem;
}
.form-group label {
display: block;
color: white;
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 0.8rem;
}
.form-input {
width: 100%;
padding: 1.4rem 1.8rem;
border: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
background: rgba(255, 255, 255, 0.08);
color: white;
font-size: 1.5rem;
backdrop-filter: blur(20px);
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.form-input:focus {
outline: none;
border-color: rgba(102, 126, 234, 0.6);
box-shadow: 0 0 25px rgba(102, 126, 234, 0.3);
background: rgba(255, 255, 255, 0.12);
transform: translateY(-2px);
}
.form-input:hover {
border-color: rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.1);
}
.form-input::placeholder {
color: #a0aec0;
}
/* Select Dropdown Styling */
.form-input[type="select"],
.form-input[data-type="select"],
select.form-input {
color: white;
background: rgba(255, 255, 255, 0.08);
cursor: pointer;
}
.form-input[type="select"] option,
.form-input[data-type="select"] option,
select.form-input option {
background: #1a1a1a;
color: white;
padding: 1rem;
border: none;
}
.form-input[type="select"] option:hover,
.form-input[data-type="select"] option:hover,
select.form-input option:hover {
background: rgba(102, 126, 234, 0.3);
}
.form-input[type="select"] option:checked,
.form-input[data-type="select"] option:checked,
select.form-input option:checked {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
}
/* Additional Select Styling for Better Browser Support */
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 1.5rem;
padding-right: 3rem;
}
/* Removed -ms-expand for compatibility */
/* Ensure dropdown options are visible */
select option {
background-color: #1a1a1a !important;
color: white !important;
border: none !important;
padding: 1rem !important;
}
select option:hover {
background-color: rgba(102, 126, 234, 0.3) !important;
}
select option:checked {
background: linear-gradient(135deg, #667eea, #764ba2) !important;
color: white !important;
}
/* Character Count */
.char-count {
text-align: right;
font-size: 1.2rem;
color: #a0aec0;
margin-top: 0.5rem;
}
/* Radio Group */
.radio-group {
display: flex;
gap: 2rem;
margin-top: 0.5rem;
}
.radio-option {
display: flex;
align-items: center;
gap: 0.8rem;
cursor: pointer;
padding: 1rem 1.5rem;
border-radius: 8px;
background: rgba(255, 255, 255, 0.05);
border: 2px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.radio-option:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(102, 126, 234, 0.3);
}
.radio-option input[type="radio"] {
width: 1.8rem;
height: 1.8rem;
accent-color: #667eea;
}
.radio-option input[type="radio"]:checked + span {
color: #667eea;
font-weight: 600;
}
.radio-option span {
color: white;
font-size: 1.4rem;
}
.form-actions {
display: flex;
align-items: center;
gap: 2rem;
flex-wrap: wrap;
position: relative;
z-index: 1000; /* Ensure button is above other elements */
}
.credits-info {
color: #a0aec0;
font-size: 1.4rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.credits-info.low-credits {
color: #f56565;
animation: pulse 2s infinite;
}
.credit-warning {
color: #f56565;
font-weight: 600;
margin-left: 0.5rem;
}
.loading-state {
text-align: center;
padding: 4rem 2rem;
}
.loading-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
}
.loading-spinner {
width: 6rem;
height: 6rem;
border: 4px solid rgba(255, 255, 255, 0.1);
border-top: 4px solid #667eea;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 2rem;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loading-content h3 {
color: white;
font-size: 2.4rem;
margin-bottom: 1rem;
}
.loading-content p {
color: #a0aec0;
font-size: 1.6rem;
margin-bottom: 2rem;
}
.loading-note {
font-size: 1.4rem;
color: #667eea;
font-style: italic;
margin-top: 2rem;
}
.progress-bar {
width: 100%;
max-width: 400px;
height: 8px;
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
overflow: hidden;
margin: 2rem auto;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #667eea, #764ba2);
width: 0%;
animation: progress 3s ease-in-out infinite;
}
@keyframes progress {
0% { width: 0%; }
50% { width: 70%; }
100% { width: 100%; }
}
/* Success Message */
.success-message {
position: fixed;
top: 20px;
right: 20px;
background: linear-gradient(135deg, #48bb78, #38a169);
color: white;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
z-index: 10000;
animation: slideIn 0.5s ease;
max-width: 400px;
}
@keyframes slideIn {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
.success-content {
text-align: center;
}
.success-content i {
font-size: 3rem;
margin-bottom: 1rem;
}
.success-content h3 {
font-size: 1.8rem;
margin-bottom: 1rem;
}
.success-content p {
font-size: 1.4rem;
margin-bottom: 0.5rem;
}
/* Processing Card */
.processing-card {
border: 2px solid #667eea;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.status-processing {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
padding: 0.5rem 1rem;
border-radius: 6px;
font-size: 1.2rem;
font-weight: 600;
}
.results-section {
text-align: center;
padding: 3rem;
background: rgba(72, 187, 120, 0.1);
border-radius: 16px;
border: 1px solid rgba(72, 187, 120, 0.2);
}
.results-content h3 {
font-size: 2.4rem;
color: white;
margin-bottom: 2rem;
}
.audio-player {
margin-bottom: 2rem;
}
.results-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
/* Slider Styles */
.slider-container {
margin-top: 1rem;
}
.slider {
width: 100%;
height: 6px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.1);
outline: none;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea, #764ba2);
cursor: pointer;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea, #764ba2);
cursor: pointer;
border: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.slider-labels {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 0.8rem;
font-size: 1.2rem;
color: #a0aec0;
}
.slider-labels span:nth-child(2) {
color: #667eea;
font-weight: 600;
font-size: 1.4rem;
}
.creator-container {
max-width: 80rem;
margin: 0 auto;
}
.creator-header {
text-align: center;
margin-bottom: 6rem;
}
.creator-title {
font-size: 4.8rem;
font-weight: 700;
color: white;
margin-bottom: 2rem;
}
.creator-subtitle {
font-size: 2rem;
color: #a0aec0;
}
.btn {
padding: 1.2rem 2.4rem;
border: none;
border-radius: 10px;
font-size: 1.6rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.8rem;
text-decoration: none;
}
.btn-primary {
background: linear-gradient(45deg, #667eea, #764ba2);
color: white;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}
.creator-form {
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);
}
.form-group {
margin-bottom: 3rem;
}
.form-label {
display: block;
font-size: 1.6rem;
font-weight: 600;
color: white;
margin-bottom: 1rem;
}
.form-input,
.form-textarea,
.form-select {
width: 100%;
padding: 1.5rem 2rem;
border: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
background: rgba(255, 255, 255, 0.05);
color: white;
font-size: 1.6rem;
transition: all 0.3s ease;
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
outline: none;
border-color: #667eea;
background: rgba(255, 255, 255, 0.1);
}
.form-textarea {
min-height: 12rem;
resize: vertical;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
@media (max-width: 768px) {
.form-row {
grid-template-columns: 1fr !important;
gap: 1.5rem;
}
}
.create-btn {
width: 100%;
padding: 2rem;
font-size: 1.8rem;
font-weight: 700;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border: none;
border-radius: 16px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.create-btn:hover {
transform: translateY(-2px);
box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
}
.create-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
/* Results Section */
.results-section {
margin-top: 4rem;
display: none;
}
.results-header {
text-align: center;
margin-bottom: 3rem;
}
.results-title {
font-size: 3.2rem;
font-weight: 700;
color: white;
margin-bottom: 1rem;
}
.audio-player {
background: rgba(255, 255, 255, 0.05);
padding: 3rem;
border-radius: 20px;
margin-bottom: 2rem;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.audio-player audio {
width: 100%;
border-radius: 12px;
}
.download-btn {
display: inline-flex;
align-items: center;
gap: 1rem;
padding: 1.5rem 3rem;
background: linear-gradient(135deg, #48bb78, #38a169);
color: white;
text-decoration: none;
border-radius: 12px;
font-weight: 600;
transition: all 0.3s ease;
}
.download-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(72, 187, 120, 0.3);
}
/* Features Section */
.features {
background: #1a1a1a;
padding: 8rem 0;
}
.section-header {
text-align: center;
margin-bottom: 6rem;
}
.section-title {
font-size: 4.8rem;
font-weight: 700;
color: white;
margin-bottom: 2rem;
}
.section-subtitle {
font-size: 2rem;
color: #a0aec0;
max-width: 60rem;
margin: 0 auto;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(35rem, 1fr));
gap: 3rem;
}
.feature-card {
background: rgba(255, 255, 255, 0.05);
padding: 4rem 3rem;
border-radius: 20px;
text-align: center;
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.feature-card-link {
text-decoration: none;
color: inherit;
display: block;
}
.feature-card:hover {
transform: translateY(-10px);
border-color: rgba(102, 126, 234, 0.3);
box-shadow: 0 30px 80px rgba(102, 126, 234, 0.2);
}
.feature-icon {
font-size: 4rem;
color: #667eea;
margin-bottom: 2rem;
}
.feature-title {
font-size: 2.4rem;
font-weight: 700;
color: white;
margin-bottom: 1.5rem;
}
.feature-description {
font-size: 1.6rem;
color: #a0aec0;
line-height: 1.6;
}
/* Pricing Section */
.pricing {
background: #0a0a0a;
padding: 8rem 0;
}
.credits-packages {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 3rem;
max-width: 120rem;
margin: 0 auto;
padding: 0 2rem;
}
.credit-package {
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
border: 2px solid;
border-image: linear-gradient(135deg, #667eea, #764ba2) 1;
border-radius: 20px;
padding: 3rem 2rem;
text-align: center;
position: relative;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.credit-package:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3);
}
.credit-package.featured {
transform: scale(1.05);
border-image: linear-gradient(135deg, #667eea, #764ba2) 1;
box-shadow: 0 0 30px rgba(102, 126, 234, 0.3);
}
.credit-package.featured:hover {
transform: scale(1.05) translateY(-10px);
}
.package-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 2rem;
font-size: 2.4rem;
color: white;
}
.package-name {
font-size: 2.8rem;
font-weight: 800;
color: white;
margin-bottom: 1rem;
}
.package-credits {
font-size: 2rem;
color: #667eea;
font-weight: 700;
margin-bottom: 1.5rem;
}
.package-price {
margin-bottom: 1.5rem;
}
.original-price {
display: block;
font-size: 1.4rem;
color: #ff6b6b;
text-decoration: line-through;
margin-bottom: 0.5rem;
opacity: 0.8;
}
.current-price {
display: block;
font-size: 3.2rem;
font-weight: 900;
color: white;
margin-bottom: 0.5rem;
}
.per-credit {
display: block;
font-size: 1.2rem;
color: #a0aec0;
}
.special-badge {
background: linear-gradient(135deg, #ff6b6b, #ee5a52);
color: white;
padding: 0.6rem 1.2rem;
border-radius: 12px;
font-size: 1rem;
font-weight: 600;
margin-bottom: 1.5rem;
display: inline-block;
box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.package-badge {
position: absolute;
top: -12px;
right: 15px;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
padding: 0.5rem 1rem;
border-radius: 10px;
font-size: 0.9rem;
font-weight: 600;
z-index: 3;
}
.package-features {
list-style: none;
padding: 0;
margin-bottom: 3rem;
}
.package-features li {
color: #a0aec0;
font-size: 1.4rem;
margin-bottom: 0.8rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
text-align: center;
}
.package-features li.crossed-out {
text-decoration: line-through;
color: #718096;
opacity: 0.6;
}
.purchase-btn {
background: linear-gradient(135deg, #667eea, #764ba2);
border: none;
color: white;
padding: 1.5rem 3rem;
border-radius: 12px;
font-size: 1.8rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
position: relative;
z-index: 2;
}
.purchase-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}
/* Testimonials Section */
.testimonials {
background: #0a0a0a;
padding: 8rem 0;
position: relative;
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.5rem;
max-width: 140rem;
margin: 4rem auto 0;
padding: 0 2rem;
}
.testimonial-card {
background: rgba(26, 26, 26, 0.8);
padding: 3rem;
border-radius: 20px;
border: 1px solid rgba(102, 126, 234, 0.2);
position: relative;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.testimonial-card:hover {
transform: translateY(-5px);
border-color: rgba(102, 126, 234, 0.4);
box-shadow: 0 20px 40px rgba(102, 126, 234, 0.2);
}
.testimonial-card::after {
content: '"';
position: absolute;
bottom: 1rem;
right: 1.5rem;
font-size: 6rem;
color: rgba(102, 126, 234, 0.15);
font-family: Georgia, serif;
line-height: 1;
}
.testimonial-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
border: 3px solid rgba(102, 126, 234, 0.3);
box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
}
.testimonial-avatar img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.testimonial-text {
color: #e2e8f0;
line-height: 1.8;
margin-bottom: 2rem;
font-size: 1.5rem;
position: relative;
z-index: 1;
}
.testimonial-author {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.testimonial-author-name {
color: #ffffff;
font-size: 1.6rem;
font-weight: 600;
}
.testimonial-author-role {
color: #a0aec0;
font-size: 1.3rem;
}
@media (max-width: 1200px) {
.testimonials-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.testimonials-grid {
grid-template-columns: 1fr;
}
}
/* CTA Section */
.cta {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 8rem 0;
text-align: center;
}
.cta-content {
max-width: 60rem;
margin: 0 auto;
}
.cta-title {
font-size: 4.8rem;
font-weight: 700;
margin-bottom: 2rem;
color: white;
}
.cta-description {
font-size: 2rem;
margin-bottom: 4rem;
opacity: 0.9;
color: white;
}
/* Responsive Design */
@media (max-width: 768px) {
html { font-size: 56.25%; }
.hero-title { font-size: 4.8rem; }
.hero-subtitle { font-size: 1.8rem; }
.section-title { font-size: 3.2rem; }
.hero-actions {
flex-direction: column;
align-items: center;
gap: 1.5rem;
}
.btn {
width: 100%;
max-width: 30rem;
justify-content: center;
padding: 1.5rem 2rem;
font-size: 1.6rem;
}
.features-grid {
grid-template-columns: 1fr !important;
gap: 2rem;
}
.pricing-grid {
grid-template-columns: 1fr !important;
}
.form-row {
grid-template-columns: 1fr !important;
}
/* Credits packages mobile - override inline styles */
.credits-packages {
grid-template-columns: 1fr !important;
gap: 2rem !important;
padding: 0 1rem !important;
max-width: 100% !important;
}
/* Override any inline grid styles */
.credits-packages[style*="grid-template-columns"],
div[style*="grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))"] {
grid-template-columns: 1fr !important;
}
/* Ensure pricing section is mobile-friendly */
.pricing {
padding: 4rem 0;
}
/* Feature cards mobile */
.feature-card {
padding: 2.5rem 2rem;
}
.feature-icon {
font-size: 3rem;
}
.feature-title {
font-size: 2rem;
}
.feature-description {
font-size: 1.4rem;
}
/* Credit package mobile */
.credit-package {
padding: 2rem 1.5rem;
}
.package-icon {
width: 60px;
height: 60px;
font-size: 2rem;
}
.package-name {
font-size: 2.2rem;
}
/* Fix any two-column grids */
div[style*="grid-template-columns: 1fr 1fr"],
.form-row[style*="grid-template-columns: 1fr 1fr"] {
grid-template-columns: 1fr !important;
}
.creator-form {
padding: 2rem;
margin: 0 1rem;
}
.mode-selector {
flex-direction: column;
gap: 1rem;
}
.mode-option {
padding: 1.5rem;
text-align: center;
}
.form-group {
margin-bottom: 2rem;
}
.form-input,
.form-textarea,
.form-select {
padding: 1.2rem;
font-size: 1.6rem;
}
.slider-container {
margin-top: 1rem;
}
.slider-labels {
font-size: 1.2rem;
}
.form-actions {
flex-direction: column;
gap: 1.5rem;
}
.credits-info {
text-align: center;
font-size: 1.4rem;
}
}
@media (max-width: 480px) {
html { font-size: 50%; }
.hero-title { font-size: 4rem; }
.hero-subtitle { font-size: 1.6rem; }
.section-title { font-size: 2.8rem; }
.container { padding: 0 1rem; }
.creator-form {
padding: 1.5rem;
margin: 0 0.5rem;
}
.hero {
padding: 6rem 0 4rem;
}
.hero-badge {
padding: 1rem 2rem;
font-size: 1.2rem;
}
.btn {
padding: 1.2rem 1.5rem;
font-size: 1.4rem;
}
.mode-option {
padding: 1.2rem;
}
.form-input,
.form-textarea,
.form-select {
padding: 1rem;
font-size: 1.4rem;
}
/* Small mobile - features and packages */
.feature-card {
padding: 2rem 1.5rem;
}
.feature-icon {
font-size: 2.5rem;
}
.feature-title {
font-size: 1.8rem;
}
.feature-description {
font-size: 1.3rem;
}
.credits-packages {
grid-template-columns: 1fr !important;
gap: 1.5rem !important;
}
.credit-package {
padding: 1.5rem 1rem;
}
.package-icon {
width: 50px;
height: 50px;
font-size: 1.8rem;
}
.package-name {
font-size: 2rem;
}
}
/* Three-Column Feed Section */
.feed-section {
padding: 6rem 0;
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
position: relative;
}
.feed-header {
margin-bottom: 4rem;
}
.feed-header-top {
display: flex;
justify-content: flex-end;
gap: 1.5rem;
margin-bottom: 2rem;
}
.feed-filter-select {
background: rgba(102, 126, 234, 0.1);
border: 1px solid rgba(102, 126, 234, 0.3);
color: #fff;
padding: 0.8rem 1.5rem;
border-radius: 8px;
font-size: 1.4rem;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.feed-filter-select:hover {
background: rgba(102, 126, 234, 0.2);
border-color: rgba(102, 126, 234, 0.5);
}
.feed-columns {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3rem;
max-width: 160rem;
margin: 0 auto;
}
.feed-column {
background: rgba(26, 26, 26, 0.6);
border-radius: 20px;
padding: 2.5rem;
backdrop-filter: blur(10px);
border: 1px solid rgba(102, 126, 234, 0.1);
transition: all 0.3s ease;
}
.feed-column:hover {
border-color: rgba(102, 126, 234, 0.3);
transform: translateY(-2px);
box-shadow: 0 10px 40px rgba(102, 126, 234, 0.1);
}
.feed-column-header {
margin-bottom: 2.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid rgba(102, 126, 234, 0.2);
}
.feed-column-title {
font-size: 2.4rem;
font-weight: 700;
color: #fff;
margin: 0;
background: linear-gradient(135deg, #fff, #667eea);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.feed-column-content {
display: flex;
flex-direction: column;
gap: 2rem;
max-height: 80vh;
overflow-y: auto;
padding-right: 0.5rem;
}
.feed-column-content::-webkit-scrollbar {
width: 6px;
}
.feed-column-content::-webkit-scrollbar-track {
background: rgba(26, 26, 26, 0.5);
border-radius: 10px;
}
.feed-column-content::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 10px;
}
/* Track Cards */
.feed-track-card {
background: rgba(15, 15, 15, 0.6);
border-radius: 16px;
padding: 1.5rem;
transition: all 0.3s ease;
border: 1px solid rgba(102, 126, 234, 0.1);
}
.feed-track-card:hover {
background: rgba(20, 20, 20, 0.8);
border-color: rgba(102, 126, 234, 0.3);
transform: translateX(4px);
}
.feed-track-image {
position: relative;
width: 100%;
aspect-ratio: 1;
border-radius: 12px;
overflow: hidden;
margin-bottom: 1.2rem;
background: linear-gradient(135deg, #667eea, #764ba2);
}
.feed-track-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.feed-track-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.feed-track-card:hover .feed-track-overlay {
opacity: 1;
}
.feed-play-btn {
width: 5rem;
height: 5rem;
border-radius: 50%;
background: linear-gradient(135deg, #667eea, #764ba2);
border: none;
color: white;
font-size: 2rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
}
.feed-play-btn:hover {
transform: scale(1.1);
box-shadow: 0 6px 30px rgba(102, 126, 234, 0.6);
}
.feed-track-info {
margin-bottom: 1rem;
}
.feed-track-title {
font-size: 1.6rem;
font-weight: 600;
margin: 0 0 0.8rem 0;
line-height: 1.3;
}
.feed-track-title a {
color: #fff;
text-decoration: none;
transition: color 0.3s ease;
}
.feed-track-title a:hover {
color: #667eea;
}
.feed-track-genres {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 0.8rem;
}
.feed-genre-tag {
background: rgba(102, 126, 234, 0.2);
color: #a0aec0;
padding: 0.4rem 0.8rem;
border-radius: 6px;
font-size: 1.1rem;
font-weight: 500;
border: 1px solid rgba(102, 126, 234, 0.3);
}
.feed-track-artist {
font-size: 1.3rem;
color: #a0aec0;
}
.feed-track-artist a {
color: #a0aec0;
text-decoration: none;
transition: color 0.3s ease;
}
.feed-track-artist a:hover {
color: #667eea;
}
.feed-track-stats {
display: flex;
gap: 1.5rem;
padding-top: 1rem;
border-top: 1px solid rgba(102, 126, 234, 0.1);
}
.feed-stat {
display: flex;
align-items: center;
gap: 0.5rem;
color: #a0aec0;
font-size: 1.2rem;
}
.feed-stat i {
color: #667eea;
font-size: 1.1rem;
}
/* Interactive stat buttons (like, comment) */
button.feed-stat {
background: none;
border: none;
cursor: pointer;
padding: 0.4rem 0.6rem;
border-radius: 6px;
transition: all 0.2s ease;
}
button.feed-stat:hover {
background: rgba(102, 126, 234, 0.15);
transform: scale(1.05);
}
button.feed-stat:active {
transform: scale(0.95);
}
button.feed-stat.loading {
opacity: 0.6;
pointer-events: none;
}
/* Like button states */
.feed-like-btn i {
transition: all 0.3s ease;
}
.feed-like-btn:hover i {
color: #ff6b6b;
}
.feed-like-btn.liked i {
color: #ff6b6b;
animation: heartPulse 0.3s ease;
}
.feed-like-btn.liked {
color: #ff6b6b;
}
@keyframes heartPulse {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}
/* Comment button */
.feed-comment-btn:hover i {
color: #4fd1c5;
}
/* Creator Cards */
.feed-creator-card {
background: rgba(15, 15, 15, 0.6);
border-radius: 16px;
padding: 1.5rem;
display: flex;
align-items: center;
gap: 1.5rem;
transition: all 0.3s ease;
border: 1px solid rgba(102, 126, 234, 0.1);
}
.feed-creator-card:hover {
background: rgba(20, 20, 20, 0.8);
border-color: rgba(102, 126, 234, 0.3);
transform: translateX(4px);
}
.feed-creator-avatar {
width: 5.5rem;
height: 5.5rem;
border-radius: 50%;
overflow: hidden;
background: linear-gradient(135deg, #667eea, #764ba2);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: 2px solid rgba(102, 126, 234, 0.3);
}
.feed-creator-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.feed-creator-avatar span {
color: white;
font-size: 2rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
text-align: center;
line-height: 1;
position: relative;
z-index: 1;
}
/* Ensure span is visible when there's no image */
.feed-creator-avatar:not(:has(img)) span,
.feed-creator-avatar span:not([style*="display:none"]) {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
}
.feed-creator-info {
flex: 1;
min-width: 0;
}
.feed-creator-name {
font-size: 1.6rem;
font-weight: 600;
margin: 0 0 0.4rem 0;
line-height: 1.3;
}
.feed-creator-name a {
color: #fff;
text-decoration: none;
transition: color 0.3s ease;
}
.feed-creator-name a:hover {
color: #667eea;
}
.feed-creator-handle {
font-size: 1.2rem;
color: #a0aec0;
margin-bottom: 0.4rem;
}
.feed-creator-followers {
font-size: 1.1rem;
color: #718096;
}
.feed-follow-btn {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border: none;
padding: 0.8rem 1.8rem;
border-radius: 8px;
font-size: 1.3rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.feed-follow-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 25px rgba(102, 126, 234, 0.4);
}
.feed-follow-btn.following {
background: linear-gradient(135deg, #48bb78, #38a169);
}
.feed-empty {
text-align: center;
padding: 4rem 2rem;
color: #a0aec0;
}
.feed-empty i {
font-size: 4rem;
margin-bottom: 1.5rem;
opacity: 0.5;
}
.feed-empty p {
font-size: 1.4rem;
}
/* Responsive Design for Feed */
@media (max-width: 1200px) {
.feed-columns {
grid-template-columns: 1fr;
gap: 2rem;
}
.feed-column {
max-width: 100%;
}
}
@media (max-width: 768px) {
.feed-section {
padding: 4rem 0;
}
.feed-header-top {
flex-direction: column;
gap: 1rem;
}
.feed-filter-select {
font-size: 1.4rem;
}
.feed-column {
padding: 2rem;
}
.feed-column-title {
font-size: 2rem;
}
.feed-column-content {
max-height: none;
overflow-y: visible;
}
}
</style>
<!-- Hero Section -->
<section class="hero">
<div class="container">
<div class="hero-content">
<div class="hero-badge">🎵 <?= t('home.hero_badge') ?></div>
<h1 class="hero-title"><?= t('home.hero_title') ?></h1>
<p class="hero-subtitle"><?= t('home.hero_subtitle') ?></p>
<div class="hero-actions">
<a href="#create" class="btn btn-primary">🎵 <?= t('btn.start_creating') ?></a>
<a href="#features" class="btn btn-secondary"><?= t('btn.explore_features') ?></a>
<a href="/community_fixed.php" class="btn btn-secondary">🎵 <?= t('btn.browse_feed') ?></a>
</div>
</div>
</div>
</section>
<!-- Three-Column Feed Section -->
<section class="feed-section">
<div class="container">
<div class="feed-header">
<div class="feed-header-top">
<div class="feed-filter">
<select class="feed-filter-select" id="feedTimeFilter">
<option value="now"><?= t('feed.now') ?></option>
<option value="today"><?= t('feed.today') ?></option>
<option value="week"><?= t('feed.this_week') ?></option>
<option value="month"><?= t('feed.this_month') ?></option>
</select>
</div>
<!-- Hidden scope filter - always global -->
<input type="hidden" id="feedScopeFilter" value="global">
</div>
</div>
<div class="feed-columns">
<!-- For You Column -->
<div class="feed-column">
<div class="feed-column-header">
<h3 class="feed-column-title"><?= t('feed.for_you') ?></h3>
</div>
<div class="feed-column-content">
<?php if (empty($for_you_tracks)): ?>
<div class="feed-empty">
<i class="fas fa-music"></i>
<p><?= t('feed.no_tracks') ?></p>
</div>
<?php else: ?>
<?php foreach ($for_you_tracks as $track):
$genre = extractGenre($track);
$imageUrl = $track['image_url'] ?? '/assets/images/default-track.jpg';
$audioUrl = $track['signed_audio_url'] ?? $track['audio_url'] ?? '';
$duration = $track['duration'] ? gmdate('i:s', $track['duration']) : '0:00';
?>
<div class="feed-track-card" data-track-id="<?= $track['id'] ?>">
<div class="feed-track-image">
<img src="<?= htmlspecialchars($imageUrl) ?>" alt="<?= htmlspecialchars($track['title']) ?>" loading="lazy">
<div class="feed-track-overlay">
<button class="feed-play-btn"
data-audio-url="<?= htmlspecialchars($audioUrl) ?>"
data-title="<?= htmlspecialchars($track['title']) ?>"
data-artist="<?= htmlspecialchars($track['artist_name']) ?>">
<i class="fas fa-play"></i>
</button>
</div>
</div>
<div class="feed-track-info">
<h4 class="feed-track-title">
<a href="/track.php?id=<?= $track['id'] ?>"><?= htmlspecialchars($track['title'] ?: 'Untitled Track') ?></a>
</h4>
<div class="feed-track-genres">
<?php
$genres = explode(',', $genre);
foreach (array_slice($genres, 0, 3) as $g):
$g = trim($g);
if (!empty($g)):
?>
<span class="feed-genre-tag"><?= htmlspecialchars($g) ?></span>
<?php
endif;
endforeach;
?>
</div>
<div class="feed-track-artist">
<a href="/artist_profile.php?id=<?= $track['artist_id'] ?>"><?= htmlspecialchars($track['artist_name']) ?></a>
</div>
</div>
<div class="feed-track-stats">
<span class="feed-stat">
<i class="fas fa-play"></i>
<?= formatNumberK($track['play_count']) ?>
</span>
<button class="feed-stat feed-like-btn <?= !empty($track['user_liked']) ? 'liked' : '' ?>"
onclick="toggleTrackLike(<?= $track['id'] ?>, this)"
title="<?= t('feed.like') ?? 'Like' ?>">
<i class="fas fa-heart"></i>
<span class="like-count"><?= formatNumberK($track['like_count']) ?></span>
</button>
<button class="feed-stat feed-comment-btn"
onclick="showComments(<?= $track['id'] ?>)"
title="<?= t('feed.comments') ?? 'Comments' ?>">
<i class="fas fa-comment"></i>
<span><?= formatNumberK($track['comment_count']) ?></span>
</button>
</div>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
</div>
<!-- Suggested Creators Column -->
<div class="feed-column">
<div class="feed-column-header">
<h3 class="feed-column-title"><?= t('feed.suggested_creators') ?></h3>
</div>
<div class="feed-column-content">
<?php if (empty($suggested_creators)): ?>
<div class="feed-empty">
<i class="fas fa-users"></i>
<p><?= t('feed.no_suggestions') ?></p>
</div>
<?php else: ?>
<?php foreach ($suggested_creators as $creator):
$profileImg = formatProfileImage($creator['profile_image'], $creator['name']);
$initials = strtoupper(substr($creator['name'], 0, 1));
$profilePos = $creator['profile_position'] ?? 'center center';
?>
<div class="feed-creator-card" data-creator-id="<?= $creator['id'] ?>">
<div class="feed-creator-avatar">
<?php if ($profileImg): ?>
<img src="<?= htmlspecialchars($profileImg) ?>" alt="<?= htmlspecialchars($creator['name']) ?>" style="object-position: <?= htmlspecialchars($profilePos) ?>;" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<span style="display:none;"><?= $initials ?></span>
<?php else: ?>
<span style="display: flex !important;"><?= $initials ?></span>
<?php endif; ?>
</div>
<div class="feed-creator-info">
<h4 class="feed-creator-name">
<a href="/artist_profile.php?id=<?= $creator['id'] ?>"><?= htmlspecialchars($creator['name']) ?></a>
</h4>
<div class="feed-creator-handle">@<?= htmlspecialchars(strtolower(str_replace(' ', '', $creator['name']))) ?></div>
<div class="feed-creator-followers"><?= formatNumberK($creator['followers_count']) ?> <?= t('feed.followers') ?></div>
</div>
<?php if ($user_id): ?>
<button class="feed-follow-btn" onclick="toggleFollow(<?= $creator['id'] ?>, this)">
<?= t('feed.follow') ?>
</button>
<?php else: ?>
<a href="/auth/login.php" class="feed-follow-btn" style="text-decoration: none; display: inline-block;">
<?= t('feed.follow') ?>
</a>
<?php endif; ?>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
</div>
<!-- Trending Column -->
<div class="feed-column">
<div class="feed-column-header">
<h3 class="feed-column-title"><?= t('feed.trending') ?></h3>
</div>
<div class="feed-column-content">
<?php if (empty($trending_tracks)): ?>
<div class="feed-empty">
<i class="fas fa-fire"></i>
<p><?= t('feed.no_trending') ?></p>
</div>
<?php else: ?>
<?php foreach ($trending_tracks as $track):
$genre = extractGenre($track);
$imageUrl = $track['image_url'] ?? '/assets/images/default-track.jpg';
$audioUrl = $track['signed_audio_url'] ?? $track['audio_url'] ?? '';
$duration = $track['duration'] ? gmdate('i:s', $track['duration']) : '0:00';
?>
<div class="feed-track-card" data-track-id="<?= $track['id'] ?>">
<div class="feed-track-image">
<img src="<?= htmlspecialchars($imageUrl) ?>" alt="<?= htmlspecialchars($track['title']) ?>" loading="lazy">
<div class="feed-track-overlay">
<button class="feed-play-btn"
data-audio-url="<?= htmlspecialchars($audioUrl) ?>"
data-title="<?= htmlspecialchars($track['title']) ?>"
data-artist="<?= htmlspecialchars($track['artist_name']) ?>">
<i class="fas fa-play"></i>
</button>
</div>
</div>
<div class="feed-track-info">
<h4 class="feed-track-title">
<a href="/track.php?id=<?= $track['id'] ?>"><?= htmlspecialchars($track['title'] ?: 'Untitled Track') ?></a>
</h4>
<div class="feed-track-genres">
<?php
$genres = explode(',', $genre);
foreach (array_slice($genres, 0, 3) as $g):
$g = trim($g);
if (!empty($g)):
?>
<span class="feed-genre-tag"><?= htmlspecialchars($g) ?></span>
<?php
endif;
endforeach;
?>
</div>
<div class="feed-track-artist">
<a href="/artist_profile.php?id=<?= $track['artist_id'] ?>"><?= htmlspecialchars($track['artist_name']) ?></a>
</div>
</div>
<div class="feed-track-stats">
<span class="feed-stat">
<i class="fas fa-play"></i>
<?= formatNumberK($track['play_count']) ?>
</span>
<button class="feed-stat feed-like-btn <?= !empty($track['user_liked']) ? 'liked' : '' ?>"
onclick="toggleTrackLike(<?= $track['id'] ?>, this)"
title="<?= t('feed.like') ?? 'Like' ?>">
<i class="fas fa-heart"></i>
<span class="like-count"><?= formatNumberK($track['like_count']) ?></span>
</button>
<button class="feed-stat feed-comment-btn"
onclick="showComments(<?= $track['id'] ?>)"
title="<?= t('feed.comments') ?? 'Comments' ?>">
<i class="fas fa-comment"></i>
<span><?= formatNumberK($track['comment_count']) ?></span>
</button>
</div>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
</div>
</div>
</div>
</section>
<!-- Music Creation Interface -->
<section id="create" class="music-creator">
<div class="container">
<div class="creator-container">
<div class="creator-header">
<h2 class="creator-title">🎵 <?= t('home.create_title') ?></h2>
<button onclick="openCreateMusicModal()" class="btn btn-primary">
<i class="fas fa-music"></i>
<?= t('btn.create_music') ?>
</button>
<p class="creator-subtitle"><?= t('home.create_subtitle') ?></p>
</div>
<div class="creator-form">
<?php if (!isset($_SESSION['user_id'])): ?>
<div style="text-align: center; padding: 4rem;">
<div style="font-size: 6rem; margin-bottom: 2rem;">🔒</div>
<h3 style="color: white; font-size: 2.4rem; margin-bottom: 1.5rem;"><?= t('home.login_required') ?></h3>
<p style="color: #a0aec0; font-size: 1.6rem; margin-bottom: 3rem;"><?= t('home.login_required_message') ?></p>
<div style="display: flex; gap: 2rem; justify-content: center; flex-wrap: wrap;">
<a href="auth/login.php" class="btn btn-primary"><?= t('user.login') ?></a>
<a href="auth/register.php" class="btn btn-secondary"><?= t('user.sign_up') ?></a>
</div>
</div>
<?php else: ?>
<!-- Success/Error Messages -->
<?php if (isset($_SESSION['success'])): ?>
<div style="background: rgba(34, 197, 94, 0.1); border: 1px solid #22c55e; padding: 1rem; margin-bottom: 2rem; border-radius: 8px; color: #22c55e;">
<strong>✅ <?= t('msg.success') ?>:</strong> <?= htmlspecialchars($_SESSION['success']) ?>
</div>
<?php unset($_SESSION['success']); ?>
<?php endif; ?>
<?php if (isset($_SESSION['error'])): ?>
<div style="background: rgba(239, 68, 68, 0.1); border: 1px solid #ef4444; padding: 1rem; margin-bottom: 2rem; border-radius: 8px; color: #ef4444;">
<strong>❌ <?= t('msg.error') ?>:</strong> <?= isset($_SESSION['error_allow_html']) && $_SESSION['error_allow_html'] ? $_SESSION['error'] : htmlspecialchars($_SESSION['error']) ?>
</div>
<?php
unset($_SESSION['error']);
if (isset($_SESSION['error_allow_html'])) {
unset($_SESSION['error_allow_html']);
}
?>
<?php endif; ?>
<!-- Debug info (SECURITY: Admin/development only) -->
<?php if (isset($_GET['debug']) && (($_SESSION['is_admin'] ?? false) || (defined('DEVELOPMENT_MODE') && DEVELOPMENT_MODE))): ?>
<div style="background: rgba(255,255,255,0.1); padding: 1rem; margin-bottom: 2rem; border-radius: 8px; font-size: 1.2rem; color: #a0aec0;">
<strong>Debug Info:</strong><br>
User ID: <?= $_SESSION['user_id'] ?? 'Not set' ?><br>
Session ID: <?= substr(session_id(), 0, 8) . '...' . substr(session_id(), -4) ?><br>
Session Status: <?= session_status() === PHP_SESSION_ACTIVE ? 'Active' : 'Inactive' ?><br>
Session Data: <?= htmlspecialchars(json_encode(array_diff_key($_SESSION, ['csrf_token' => '']))) ?>
</div>
<?php endif; ?>
<form method="POST" action="create_music.php" id="musicForm" accept-charset="UTF-8">
<?php
// SECURITY: CSRF Token
require_once __DIR__ . '/includes/security.php';
?>
<input type="hidden" name="csrf_token" value="<?= htmlspecialchars(generateCSRFToken(), ENT_QUOTES, 'UTF-8') ?>">
<input type="hidden" name="type" value="music">
<input type="hidden" name="model_name" value="V5">
<input type="hidden" name="duration" id="hiddenDuration" value="360">
<input type="hidden" name="customMode" value="false">
<!-- Mode Selection -->
<div class="mode-selector">
<div class="mode-option active" data-mode="simple">
<i class="fas fa-magic"></i>
<span><?= t('create.simple_mode') ?></span>
<small><?= t('create.simple_mode_desc') ?></small>
<div class="mode-cost">1 <?= t('create.credit') ?></div>
</div>
<div class="mode-option" data-mode="advanced">
<i class="fas fa-sliders-h"></i>
<span><?= t('create.advanced_mode') ?></span>
<small><?= t('create.advanced_mode_desc') ?></small>
<div class="mode-cost">1 <?= t('create.credit') ?></div>
</div>
<div class="mode-option" data-mode="pro">
<i class="fas fa-cogs"></i>
<span><?= t('create.pro_mode') ?></span>
<small><?= t('create.pro_mode_desc') ?></small>
<div class="mode-cost">1 <?= t('create.credit') ?></div>
</div>
</div>
<!-- Simple Mode Form -->
<div id="simpleForm" class="form-mode active">
<div class="form-group">
<label for="simpleTitle"><?= t('create.song_title_optional') ?></label>
<input type="text" name="title" id="simpleTitle" class="form-input" placeholder="<?= t('create.song_title_placeholder') ?>" maxlength="80">
<div class="char-count">0/80</div>
</div>
<div class="form-group">
<label for="simplePrompt"><?= t('create.describe_music') ?></label>
<textarea name="prompt" id="simplePrompt" class="form-input" rows="3" placeholder="<?= t('create.prompt_placeholder') ?>" maxlength="400"></textarea>
<div class="char-count">0/400</div>
</div>
<div class="form-group">
<label for="simpleInstrumental"><?= t('create.vocal_options') ?></label>
<div class="radio-group">
<label class="radio-option">
<input type="radio" name="instrumental" value="false" checked>
<span><?= t('create.with_vocals') ?></span>
</label>
<label class="radio-option">
<input type="radio" name="instrumental" value="true">
<span><?= t('create.instrumental_only') ?></span>
</label>
</div>
</div>
</div>
<!-- Advanced Mode Form -->
<div id="advancedForm" class="form-mode">
<div class="form-row">
<div class="form-group">
<label for="title"><?= t('create.song_title') ?></label>
<input type="text" name="title" id="title" class="form-input" placeholder="<?= t('create.song_title_placeholder') ?>" maxlength="80">
<div class="char-count">0/80</div>
</div>
<div class="form-group">
<label for="modelVersion"><?= t('create.ai_model') ?></label>
<select name="model_name" id="modelVersion" class="form-input">
<option value="V5" selected>V5 (Latest)</option>
<option value="V4_5">V4.5 (Premium)</option>
<option value="V4">V4 (Balanced)</option>
<option value="V3_5">V3.5 (Legacy)</option>
</select>
</div>
<div class="form-group">
<label for="variations"><?= t('create.variations') ?></label>
<select name="variations" id="variations" class="form-input">
<option value="1">1 <?= t('create.variation') ?></option>
<option value="2" selected>2 <?= t('create.variations_plural') ?></option>
<option value="3">3 <?= t('create.variations_plural') ?></option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="tempo"><?= t('create.tempo') ?></label>
<select name="tempo" id="tempo" class="form-input">
<option value=""><?= t('create.tempo_auto') ?></option>
<option value="60">60 BPM (<?= t('create.tempo_largo') ?>)</option>
<option value="70">70 BPM (<?= t('create.tempo_adagio') ?>)</option>
<option value="80">80 BPM (<?= t('create.tempo_andante') ?>)</option>
<option value="90">90 BPM (<?= t('create.tempo_moderato') ?>)</option>
<option value="100">100 BPM (<?= t('create.tempo_allegretto') ?>)</option>
<option value="120" selected>120 BPM (<?= t('create.tempo_allegro') ?>)</option>
<option value="140">140 BPM (<?= t('create.tempo_vivace') ?>)</option>
<option value="160">160 BPM (<?= t('create.tempo_presto') ?>)</option>
<option value="180">180 BPM (<?= t('create.tempo_prestissimo') ?>)</option>
</select>
</div>
<div class="form-group">
<label for="key"><?= t('create.musical_key') ?></label>
<select name="key" id="key" class="form-input">
<option value=""><?= t('create.auto_language') ?></option>
<optgroup label="Major Keys">
<option value="C">C Major</option>
<option value="G">G Major</option>
<option value="D">D Major</option>
<option value="A">A Major</option>
<option value="E">E Major</option>
<option value="B">B Major</option>
<option value="F#">F# Major</option>
<option value="C#">C# Major</option>
<option value="F">F Major</option>
<option value="Bb">Bb Major</option>
<option value="Eb">Eb Major</option>
<option value="Ab">Ab Major</option>
<option value="Db">Db Major</option>
<option value="Gb">Gb Major</option>
<option value="Cb">Cb Major</option>
</optgroup>
<optgroup label="Minor Keys">
<option value="Cm">C Minor</option>
<option value="Gm">G Minor</option>
<option value="Dm">D Minor</option>
<option value="Am">A Minor</option>
<option value="Em">E Minor</option>
<option value="Bm">B Minor</option>
<option value="F#m">F# Minor</option>
<option value="C#m">C# Minor</option>
<option value="Fm">F Minor</option>
<option value="Bbm">Bb Minor</option>
<option value="Ebm">Eb Minor</option>
<option value="Abm">Ab Minor</option>
<option value="Dbm">Db Minor</option>
<option value="Gbm">Gb Minor</option>
<option value="Cbm">Cb Minor</option>
</optgroup>
</select>
</div>
<div class="form-group">
<label for="scale"><?= t('create.scale_mode') ?></label>
<select name="scale" id="scale" class="form-input">
<option value=""><?= t('create.auto_language') ?></option>
<option value="major"><?= t('create.scale_major') ?></option>
<option value="minor"><?= t('create.scale_minor') ?></option>
<option value="dorian"><?= t('create.scale_dorian') ?></option>
<option value="mixolydian"><?= t('create.scale_mixolydian') ?></option>
<option value="lydian"><?= t('create.scale_lydian') ?></option>
<option value="phrygian"><?= t('create.scale_phrygian') ?></option>
<option value="locrian"><?= t('create.scale_locrian') ?></option>
</select>
</div>
<div class="form-group">
<label for="timeSignature"><?= t('create.time_signature') ?></label>
<select name="timeSignature" id="timeSignature" class="form-input">
<option value=""><?= t('create.auto_language') ?></option>
<option value="4/4">4/4 (<?= t('create.time_common') ?>)</option>
<option value="3/4">3/4 (<?= t('create.time_waltz') ?>)</option>
<option value="6/8">6/8 (<?= t('create.time_jig') ?>)</option>
<option value="2/4">2/4 (<?= t('create.time_march') ?>)</option>
<option value="5/4">5/4 (<?= t('create.time_unusual') ?>)</option>
<option value="7/8">7/8 (<?= t('create.time_complex') ?>)</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="energy"><?= t('create.energy_level') ?></label>
<div class="slider-container">
<input type="range" name="energy" id="energy" min="1" max="10" value="7" class="slider">
<div class="slider-labels">
<span><?= t('create.energy_calm') ?></span>
<span id="energyValue">7</span>
<span><?= t('create.energy_intense') ?></span>
</div>
</div>
</div>
<div class="form-group">
<label for="excitement"><?= t('create.excitement') ?></label>
<div class="slider-container">
<input type="range" name="excitement" id="excitement" min="1" max="10" value="6" class="slider">
<div class="slider-labels">
<span><?= t('create.excitement_relaxed') ?></span>
<span id="excitementValue">6</span>
<span><?= t('create.excitement_thrilling') ?></span>
</div>
</div>
</div>
<div class="form-group">
<label for="mood"><?= t('create.mood') ?></label>
<select name="mood" id="mood" class="form-input">
<option value=""><?= t('create.auto_language') ?></option>
<option value="happy"><?= t('create.mood_happy') ?></option>
<option value="sad"><?= t('create.mood_sad') ?></option>
<option value="energetic"><?= t('create.mood_energetic') ?></option>
<option value="calm"><?= t('create.mood_calm') ?></option>
<option value="romantic"><?= t('create.mood_romantic') ?></option>
<option value="mysterious"><?= t('create.mood_mysterious') ?></option>
<option value="dramatic"><?= t('create.mood_dramatic') ?></option>
<option value="nostalgic"><?= t('create.mood_nostalgic') ?></option>
<option value="futuristic"><?= t('create.mood_futuristic') ?></option>
<option value="organic"><?= t('create.mood_organic') ?></option>
</select>
</div>
<div class="form-group">
<label for="language"><?= t('create.language') ?></label>
<select name="language" id="language" class="form-input">
<option value=""><?= t('create.auto_language') ?></option>
<option value="english">English</option>
<option value="spanish">Spanish</option>
<option value="french">French</option>
<option value="german">German</option>
<option value="italian">Italian</option>
<option value="portuguese">Portuguese</option>
<option value="japanese">Japanese</option>
<option value="korean">Korean</option>
<option value="chinese">Chinese</option>
<option value="instrumental"><?= t('create.instrumental_only') ?></option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="genre"><?= t('create.genre') ?></label>
<select name="genre" id="genre" class="form-input">
<option value=""><?= t('create.auto_language') ?></option>
<option value="pop">Pop</option>
<option value="rock">Rock</option>
<option value="electronic">Electronic/Dance</option>
<option value="hip-hop">Hip-Hop/Rap</option>
<option value="jazz">Jazz</option>
<option value="classical">Classical</option>
<option value="country">Country</option>
<option value="r&b">R&B/Soul</option>
<option value="reggae">Reggae</option>
<option value="blues">Blues</option>
<option value="folk">Folk</option>
<option value="metal">Metal</option>
<option value="punk">Punk</option>
<option value="indie">Indie/Alternative</option>
<option value="ambient">Ambient</option>
<option value="lofi">Lo-Fi</option>
<option value="synthwave">Synthwave</option>
<option value="trap">Trap</option>
<option value="dubstep">Dubstep</option>
</select>
</div>
<div class="form-group">
<label for="voiceType"><?= t('create.voice_type') ?></label>
<select name="voiceType" id="voiceType" class="form-input">
<option value=""><?= t('create.auto_language') ?></option>
<option value="male"><?= t('create.voice_male') ?></option>
<option value="female"><?= t('create.voice_female') ?></option>
<option value="duet"><?= t('create.voice_duet') ?></option>
<option value="choir"><?= t('create.voice_choir') ?></option>
<option value="child"><?= t('create.voice_child') ?></option>
<option value="robot"><?= t('create.voice_robot') ?></option>
</select>
</div>
<div class="form-group">
<label for="useCase"><?= t('create.use_case') ?></label>
<select name="useCase" id="useCase" class="form-input">
<option value=""><?= t('create.auto_language') ?></option>
<option value="background"><?= t('create.use_background') ?></option>
<option value="workout"><?= t('create.use_workout') ?></option>
<option value="meditation"><?= t('create.use_meditation') ?></option>
<option value="party"><?= t('create.use_party') ?></option>
<option value="study"><?= t('create.use_study') ?></option>
<option value="sleep"><?= t('create.use_sleep') ?></option>
<option value="gaming"><?= t('create.use_gaming') ?></option>
<option value="commercial"><?= t('create.use_commercial') ?></option>
<option value="podcast"><?= t('create.use_podcast') ?></option>
<option value="video"><?= t('create.use_video') ?></option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="instruments"><?= t('create.primary_instruments') ?></label>
<select name="instruments" id="instruments" class="form-input">
<option value=""><?= t('create.auto_language') ?></option>
<option value="piano">Piano</option>
<option value="guitar">Guitar</option>
<option value="drums">Drums</option>
<option value="bass">Bass</option>
<option value="synth">Synthesizer</option>
<option value="strings">Strings</option>
<option value="brass">Brass</option>
<option value="woodwind">Woodwind</option>
<option value="percussion">Percussion</option>
<option value="electronic">Electronic</option>
<option value="acoustic">Acoustic</option>
<option value="orchestra">Orchestra</option>
</select>
</div>
<div class="form-group">
<label for="instrumental"><?= t('create.vocal_options') ?></label>
<div class="radio-group">
<label class="radio-option">
<input type="radio" name="instrumental" value="false" checked>
<span><?= t('create.with_vocals') ?></span>
</label>
<label class="radio-option">
<input type="radio" name="instrumental" value="true">
<span><?= t('create.instrumental_only') ?></span>
</label>
</div>
</div>
<div class="form-group">
<label for="duration"><?= t('create.duration') ?></label>
<select name="duration" id="duration" class="form-input">
<option value="180" selected>3 minutes</option>
<option value="300">5 minutes</option>
<option value="420">7 minutes</option>
<option value="540">9 minutes</option>
</select>
</div>
</div>
<div class="form-group">
<label for="advancedPrompt"><?= t('create.detailed_lyrics') ?></label>
<textarea name="advancedPrompt" id="advancedPrompt" class="form-input" rows="6" placeholder="<?= t('create.lyrics_placeholder') ?>" maxlength="5000"></textarea>
<div class="char-count">0/5000</div>
</div>
<div class="form-group">
<label for="tags"><?= t('create.tags') ?></label>
<input type="text" name="tags" id="tags" class="form-input" placeholder="<?= t('create.tags_placeholder') ?>">
</div>
</div>
<!-- Pro Mode Form -->
<div id="proForm" class="form-mode">
<div class="pro-mode-header">
<h3><i class="fas fa-crown"></i> <?= t('create.pro_mode_header') ?></h3>
<p><?= t('create.pro_mode_desc') ?></p>
</div>
<!-- Basic Info Section -->
<div class="pro-section">
<h4><i class="fas fa-info-circle"></i> <?= t('create.basic_information') ?></h4>
<div class="form-row">
<div class="form-group">
<label for="proTitle"><?= t('create.song_title') ?></label>
<input type="text" name="proTitle" id="proTitle" class="form-input" placeholder="e.g., Neon Dreams" maxlength="80">
<div class="char-count">0/80</div>
</div>
<div class="form-group">
<label for="proModel">AI Model</label>
<select name="proModel" id="proModel" class="form-input">
<option value="V5" selected>V5 (Latest & Best)</option>
<option value="V4_5">V4.5 (Premium Quality)</option>
<option value="V4">V4 (Balanced Quality)</option>
<option value="V3_5">V3.5 (Legacy)</option>
</select>
</div>
<div class="form-group">
<label for="proVariations">Variations</label>
<select name="proVariations" id="proVariations" class="form-input">
<option value="1">1 variation</option>
<option value="2" selected>2 variations</option>
<option value="3">3 variations</option>
<option value="4">4 variations</option>
<option value="5">5 variations</option>
</select>
</div>
</div>
</div>
<!-- Musical Theory Section -->
<div class="pro-section">
<h4><i class="fas fa-music"></i> Musical Theory</h4>
<div class="form-row">
<div class="form-group">
<label for="proKey">Musical Key</label>
<select name="proKey" id="proKey" class="form-input">
<option value="">Auto (AI decides)</option>
<optgroup label="Major Keys">
<option value="C">C Major</option>
<option value="G">G Major</option>
<option value="D">D Major</option>
<option value="A">A Major</option>
<option value="E">E Major</option>
<option value="B">B Major</option>
<option value="F#">F# Major</option>
<option value="C#">C# Major</option>
<option value="F">F Major</option>
<option value="Bb">Bb Major</option>
<option value="Eb">Eb Major</option>
<option value="Ab">Ab Major</option>
<option value="Db">Db Major</option>
<option value="Gb">Gb Major</option>
<option value="Cb">Cb Major</option>
</optgroup>
<optgroup label="Minor Keys">
<option value="Cm">C Minor</option>
<option value="Gm">G Minor</option>
<option value="Dm">D Minor</option>
<option value="Am">A Minor</option>
<option value="Em">E Minor</option>
<option value="Bm">B Minor</option>
<option value="F#m">F# Minor</option>
<option value="C#m">C# Minor</option>
<option value="Fm">F Minor</option>
<option value="Bbm">Bb Minor</option>
<option value="Ebm">Eb Minor</option>
<option value="Abm">Ab Minor</option>
<option value="Dbm">Db Minor</option>
<option value="Gbm">Gb Minor</option>
<option value="Cbm">Cb Minor</option>
</optgroup>
</select>
</div>
<div class="form-group">
<label for="proScale">Scale/Mode</label>
<select name="proScale" id="proScale" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="major">Major (Happy/Bright)</option>
<option value="minor">Minor (Sad/Melancholic)</option>
<option value="dorian">Dorian (Jazzy/Mysterious)</option>
<option value="mixolydian">Mixolydian (Bluesy/Rock)</option>
<option value="lydian">Lydian (Dreamy/Ethereal)</option>
<option value="phrygian">Phrygian (Exotic/Dramatic)</option>
<option value="locrian">Locrian (Tense/Unstable)</option>
<option value="pentatonic">Pentatonic (Folk/World)</option>
<option value="blues">Blues Scale</option>
<option value="chromatic">Chromatic (Experimental)</option>
</select>
</div>
<div class="form-group">
<label for="proTimeSignature">Time Signature</label>
<select name="proTimeSignature" id="proTimeSignature" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="4/4">4/4 (Common Time)</option>
<option value="3/4">3/4 (Waltz)</option>
<option value="6/8">6/8 (Jig)</option>
<option value="2/4">2/4 (March)</option>
<option value="5/4">5/4 (Unusual)</option>
<option value="7/8">7/8 (Complex)</option>
<option value="9/8">9/8 (Compound)</option>
<option value="12/8">12/8 (Blues)</option>
<option value="3/8">3/8 (Simple)</option>
<option value="6/4">6/4 (Compound)</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="proTempo">Tempo (BPM)</label>
<select name="proTempo" id="proTempo" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="40">40 BPM (Grave - Very Slow)</option>
<option value="50">50 BPM (Largo - Slow)</option>
<option value="60">60 BPM (Adagio - Slow)</option>
<option value="70">70 BPM (Andante - Walking Pace)</option>
<option value="80">80 BPM (Moderato - Moderate)</option>
<option value="90">90 BPM (Allegretto - Moderately Fast)</option>
<option value="100">100 BPM (Allegro - Fast)</option>
<option value="120" selected>120 BPM (Allegro - Fast)</option>
<option value="140">140 BPM (Vivace - Lively)</option>
<option value="160">160 BPM (Presto - Very Fast)</option>
<option value="180">180 BPM (Prestissimo - Extremely Fast)</option>
<option value="200">200 BPM (Ultra Fast)</option>
</select>
</div>
<div class="form-group">
<label for="proChordProgression">Chord Progression</label>
<select name="proChordProgression" id="proChordProgression" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="I-IV-V">I-IV-V (Classic)</option>
<option value="ii-V-I">ii-V-I (Jazz)</option>
<option value="I-V-vi-IV">I-V-vi-IV (Pop)</option>
<option value="vi-IV-I-V">vi-IV-I-V (Emotional)</option>
<option value="I-vi-IV-V">I-vi-IV-V (Classic Rock)</option>
<option value="I-bVII-IV">I-bVII-IV (Blues)</option>
<option value="i-VI-III-VII">i-VI-III-VII (Minor)</option>
<option value="custom">Custom (Specify in prompt)</option>
</select>
</div>
<div class="form-group">
<label for="proOctave">Octave Range</label>
<select name="proOctave" id="proOctave" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="low">Low (Bass heavy)</option>
<option value="mid">Mid (Balanced)</option>
<option value="high">High (Treble heavy)</option>
<option value="wide">Wide (Full range)</option>
<option value="narrow">Narrow (Focused)</option>
</select>
</div>
</div>
</div>
<!-- Genre & Style Section -->
<div class="pro-section">
<h4><i class="fas fa-palette"></i> Genre & Style</h4>
<div class="form-row">
<div class="form-group">
<label for="proGenre">Primary Genre</label>
<select name="proGenre" id="proGenre" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="pop">Pop</option>
<option value="rock">Rock</option>
<option value="electronic">Electronic/Dance</option>
<option value="hip-hop">Hip-Hop/Rap</option>
<option value="jazz">Jazz</option>
<option value="classical">Classical</option>
<option value="country">Country</option>
<option value="r&b">R&B/Soul</option>
<option value="reggae">Reggae</option>
<option value="blues">Blues</option>
<option value="folk">Folk</option>
<option value="metal">Metal</option>
<option value="punk">Punk</option>
<option value="indie">Indie/Alternative</option>
<option value="ambient">Ambient</option>
<option value="lofi">Lo-Fi</option>
<option value="synthwave">Synthwave</option>
<option value="trap">Trap</option>
<option value="dubstep">Dubstep</option>
<option value="house">House</option>
<option value="techno">Techno</option>
<option value="trance">Trance</option>
<option value="drum-bass">Drum & Bass</option>
<option value="garage">UK Garage</option>
<option value="grime">Grime</option>
<option value="drill">Drill</option>
<option value="afrobeats">Afrobeats</option>
<option value="k-pop">K-Pop</option>
<option value="latin">Latin</option>
<option value="world">World Music</option>
</select>
</div>
<div class="form-group">
<label for="proSubGenre">Sub-Genre</label>
<select name="proSubGenre" id="proSubGenre" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="alternative">Alternative</option>
<option value="progressive">Progressive</option>
<option value="experimental">Experimental</option>
<option value="fusion">Fusion</option>
<option value="acoustic">Acoustic</option>
<option value="electric">Electric</option>
<option value="vintage">Vintage/Retro</option>
<option value="modern">Modern</option>
<option value="futuristic">Futuristic</option>
<option value="organic">Organic</option>
<option value="synthetic">Synthetic</option>
</select>
</div>
<div class="form-group">
<label for="proDecade">Decade Style</label>
<select name="proDecade" id="proDecade" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="1960s">1960s (Psychedelic)</option>
<option value="1970s">1970s (Disco/Rock)</option>
<option value="1980s">1980s (Synthwave)</option>
<option value="1990s">1990s (Grunge/Electronica)</option>
<option value="2000s">2000s (Pop/Rock)</option>
<option value="2010s">2010s (EDM/Hip-Hop)</option>
<option value="2020s">2020s (Modern)</option>
</select>
</div>
</div>
</div>
<!-- Instruments Section -->
<div class="pro-section">
<h4><i class="fas fa-guitar"></i> Instruments & Arrangement</h4>
<div class="form-row">
<div class="form-group">
<label for="proLeadInstrument">Lead Instrument</label>
<select name="proLeadInstrument" id="proLeadInstrument" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="piano">Piano</option>
<option value="guitar">Guitar</option>
<option value="synth">Synthesizer</option>
<option value="violin">Violin</option>
<option value="saxophone">Saxophone</option>
<option value="trumpet">Trumpet</option>
<option value="flute">Flute</option>
<option value="voice">Voice</option>
<option value="drums">Drums</option>
<option value="bass">Bass</option>
</select>
</div>
<div class="form-group">
<label for="proRhythmSection">Rhythm Section</label>
<select name="proRhythmSection" id="proRhythmSection" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="drums-bass">Drums + Bass</option>
<option value="drums-only">Drums Only</option>
<option value="bass-only">Bass Only</option>
<option value="percussion">Percussion</option>
<option value="electronic-beats">Electronic Beats</option>
<option value="acoustic-drums">Acoustic Drums</option>
<option value="none">No Rhythm Section</option>
</select>
</div>
<div class="form-group">
<label for="proHarmonySection">Harmony Section</label>
<select name="proHarmonySection" id="proHarmonySection" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="piano">Piano</option>
<option value="guitar">Guitar</option>
<option value="strings">Strings</option>
<option value="synth-pads">Synth Pads</option>
<option value="brass">Brass</option>
<option value="choir">Choir</option>
<option value="none">No Harmony</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="proArrangement">Arrangement Style</label>
<select name="proArrangement" id="proArrangement" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="minimal">Minimal (Sparse)</option>
<option value="standard">Standard (Balanced)</option>
<option value="dense">Dense (Layered)</option>
<option value="orchestral">Orchestral (Full)</option>
<option value="electronic">Electronic (Synthetic)</option>
<option value="acoustic">Acoustic (Natural)</option>
<option value="hybrid">Hybrid (Mixed)</option>
</select>
</div>
<div class="form-group">
<label for="proComplexity">Musical Complexity</label>
<select name="proComplexity" id="proComplexity" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="simple">Simple (Basic)</option>
<option value="moderate">Moderate (Standard)</option>
<option value="complex">Complex (Advanced)</option>
<option value="virtuoso">Virtuoso (Expert)</option>
</select>
</div>
<div class="form-group">
<label for="proDensity">Track Density</label>
<select name="proDensity" id="proDensity" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="sparse">Sparse (Few elements)</option>
<option value="moderate">Moderate (Balanced)</option>
<option value="dense">Dense (Many elements)</option>
<option value="wall-of-sound">Wall of Sound (Maximum)</option>
</select>
</div>
</div>
</div>
<!-- Production Section -->
<div class="pro-section">
<h4><i class="fas fa-sliders-h"></i> Production & Mixing</h4>
<div class="form-row">
<div class="form-group">
<label for="proReverb">Reverb Level</label>
<div class="slider-container">
<input type="range" name="proReverb" id="proReverb" min="0" max="10" value="5" class="slider">
<div class="slider-labels">
<span>Dry</span>
<span id="proReverbValue">5</span>
<span>Wet</span>
</div>
</div>
</div>
<div class="form-group">
<label for="proCompression">Compression</label>
<div class="slider-container">
<input type="range" name="proCompression" id="proCompression" min="0" max="10" value="5" class="slider">
<div class="slider-labels">
<span>Light</span>
<span id="proCompressionValue">5</span>
<span>Heavy</span>
</div>
</div>
</div>
<div class="form-group">
<label for="proStereoWidth">Stereo Width</label>
<div class="slider-container">
<input type="range" name="proStereoWidth" id="proStereoWidth" min="0" max="10" value="5" class="slider">
<div class="slider-labels">
<span>Mono</span>
<span id="proStereoWidthValue">5</span>
<span>Wide</span>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="proBassLevel">Bass Level</label>
<div class="slider-container">
<input type="range" name="proBassLevel" id="proBassLevel" min="0" max="10" value="5" class="slider">
<div class="slider-labels">
<span>Low</span>
<span id="proBassLevelValue">5</span>
<span>High</span>
</div>
</div>
</div>
<div class="form-group">
<label for="proMidLevel">Mid Level</label>
<div class="slider-container">
<input type="range" name="proMidLevel" id="proMidLevel" min="0" max="10" value="5" class="slider">
<div class="slider-labels">
<span>Low</span>
<span id="proMidLevelValue">5</span>
<span>High</span>
</div>
</div>
</div>
<div class="form-group">
<label for="proTrebleLevel">Treble Level</label>
<div class="slider-container">
<input type="range" name="proTrebleLevel" id="proTrebleLevel" min="0" max="10" value="5" class="slider">
<div class="slider-labels">
<span>Low</span>
<span id="proTrebleLevelValue">5</span>
<span>High</span>
</div>
</div>
</div>
</div>
</div>
<!-- Voice & Language Section -->
<div class="pro-section">
<h4><i class="fas fa-microphone"></i> Voice & Language</h4>
<div class="form-row">
<div class="form-group">
<label for="proVoiceType">Voice Type</label>
<select name="proVoiceType" id="proVoiceType" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="duet">Male & Female</option>
<option value="duet_female_male">Female & Male</option>
<option value="choir">Choir</option>
<option value="child">Children's</option>
<option value="robot">Robot/AI</option>
<option value="whisper">Whisper</option>
<option value="screaming">Screaming</option>
<option value="rapping">Rapping</option>
<option value="singing">Singing</option>
<option value="spoken">Spoken Word</option>
</select>
</div>
<div class="form-group">
<label for="proInstrumental"><?= t('create.vocal_options') ?></label>
<div class="radio-group">
<label class="radio-option">
<input type="radio" name="instrumental" id="proInstrumentalFalse" value="false" checked>
<span><?= t('create.with_vocals') ?></span>
</label>
<label class="radio-option">
<input type="radio" name="instrumental" id="proInstrumentalTrue" value="true">
<span><?= t('create.instrumental_only') ?></span>
</label>
</div>
</div>
<div class="form-group">
<label for="proLanguage">Language</label>
<select name="proLanguage" id="proLanguage" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="english">English</option>
<option value="spanish">Spanish</option>
<option value="french">French</option>
<option value="german">German</option>
<option value="italian">Italian</option>
<option value="portuguese">Portuguese</option>
<option value="japanese">Japanese</option>
<option value="korean">Korean</option>
<option value="chinese">Chinese</option>
<option value="russian">Russian</option>
<option value="arabic">Arabic</option>
<option value="hindi">Hindi</option>
<option value="instrumental">Instrumental Only</option>
</select>
</div>
<div class="form-group">
<label for="proVocalStyle">Vocal Style</label>
<select name="proVocalStyle" id="proVocalStyle" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="clean">Clean</option>
<option value="distorted">Distorted</option>
<option value="autotune">Auto-tune</option>
<option value="harmonized">Harmonized</option>
<option value="layered">Layered</option>
<option value="choir">Choir</option>
<option value="call-response">Call & Response</option>
<option value="ad-libs">Ad-libs</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="proLyricTheme">Lyric Theme</label>
<select name="proLyricTheme" id="proLyricTheme" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="love">Love/Romance</option>
<option value="party">Party/Celebration</option>
<option value="inspirational">Inspirational</option>
<option value="sad">Sad/Melancholic</option>
<option value="angry">Angry/Aggressive</option>
<option value="peaceful">Peaceful/Calm</option>
<option value="adventure">Adventure/Epic</option>
<option value="nostalgic">Nostalgic/Retro</option>
<option value="futuristic">Futuristic/Sci-fi</option>
<option value="nature">Nature/Organic</option>
<option value="urban">Urban/City</option>
<option value="abstract">Abstract/Artistic</option>
</select>
</div>
<div class="form-group">
<label for="proRhymeScheme">Rhyme Scheme</label>
<select name="proRhymeScheme" id="proRhymeScheme" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="AABB">AABB (Simple)</option>
<option value="ABAB">ABAB (Alternating)</option>
<option value="ABBA">ABBA (Enclosed)</option>
<option value="ABCB">ABCB (Ballad)</option>
<option value="AABA">AABA (Jazz)</option>
<option value="complex">Complex (Advanced)</option>
<option value="free">Free Verse</option>
</select>
</div>
<div class="form-group">
<label for="proHookFrequency">Hook Frequency</label>
<select name="proHookFrequency" id="proHookFrequency" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="minimal">Minimal</option>
<option value="standard">Standard</option>
<option value="frequent">Frequent</option>
<option value="constant">Constant</option>
</select>
</div>
</div>
</div>
<!-- Structure Section -->
<div class="pro-section">
<h4><i class="fas fa-layer-group"></i> Song Structure</h4>
<div class="form-row">
<div class="form-group">
<label for="proIntroLength">Intro Length</label>
<select name="proIntroLength" id="proIntroLength" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="0">No Intro</option>
<option value="4">4 seconds</option>
<option value="8">8 seconds</option>
<option value="16">16 seconds</option>
<option value="32">32 seconds</option>
</select>
</div>
<div class="form-group">
<label for="proVerseChorusRatio">Verse/Chorus Ratio</label>
<select name="proVerseChorusRatio" id="proVerseChorusRatio" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="verse-heavy">Verse Heavy</option>
<option value="balanced">Balanced</option>
<option value="chorus-heavy">Chorus Heavy</option>
<option value="chorus-only">Chorus Only</option>
</select>
</div>
<div class="form-group">
<label for="proBridge">Bridge Options</label>
<select name="proBridge" id="proBridge" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="none">No Bridge</option>
<option value="instrumental">Instrumental Bridge</option>
<option value="vocal">Vocal Bridge</option>
<option value="solo">Solo Bridge</option>
<option value="breakdown">Breakdown Bridge</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="proOutroStyle">Outro Style</label>
<select name="proOutroStyle" id="proOutroStyle" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="fade">Fade Out</option>
<option value="stop">Hard Stop</option>
<option value="repeat">Repeat Chorus</option>
<option value="instrumental">Instrumental Outro</option>
<option value="vocal">Vocal Outro</option>
</select>
</div>
<div class="form-group">
<label for="proBuildUps">Build-up Sections</label>
<select name="proBuildUps" id="proBuildUps" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="none">None</option>
<option value="subtle">Subtle</option>
<option value="moderate">Moderate</option>
<option value="dramatic">Dramatic</option>
<option value="multiple">Multiple</option>
</select>
</div>
<div class="form-group">
<label for="proTransitions">Transition Style</label>
<select name="proTransitions" id="proTransitions" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="smooth">Smooth</option>
<option value="abrupt">Abrupt</option>
<option value="fade">Fade</option>
<option value="crossfade">Crossfade</option>
<option value="break">Break</option>
</select>
</div>
</div>
</div>
<!-- Advanced Controls -->
<div class="pro-section">
<h4><i class="fas fa-cogs"></i> Advanced Controls</h4>
<div class="form-row">
<div class="form-group">
<label for="proDuration">Duration</label>
<select name="proDuration" id="proDuration" class="form-input">
<option value="180" selected>3 minutes</option>
<option value="300">5 minutes</option>
<option value="420">7 minutes</option>
<option value="540">9 minutes</option>
</select>
</div>
<div class="form-group">
<label for="proQuality">Production Quality</label>
<select name="proQuality" id="proQuality" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="demo">Demo Quality</option>
<option value="radio">Radio Quality</option>
<option value="studio">Studio Quality</option>
<option value="master">Master Quality</option>
</select>
</div>
<div class="form-group">
<label for="proMood">Overall Mood</label>
<select name="proMood" id="proMood" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="happy">Happy/Joyful</option>
<option value="sad">Sad/Melancholic</option>
<option value="energetic">Energetic/Upbeat</option>
<option value="calm">Calm/Peaceful</option>
<option value="romantic">Romantic/Intimate</option>
<option value="mysterious">Mysterious/Enigmatic</option>
<option value="dramatic">Dramatic/Epic</option>
<option value="nostalgic">Nostalgic/Retro</option>
<option value="futuristic">Futuristic/Electronic</option>
<option value="organic">Organic/Natural</option>
<option value="aggressive">Aggressive/Intense</option>
<option value="dreamy">Dreamy/Ethereal</option>
<option value="dark">Dark/Atmospheric</option>
<option value="uplifting">Uplifting/Inspirational</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="proEnergy">Energy Level</label>
<div class="slider-container">
<input type="range" name="proEnergy" id="proEnergy" min="1" max="10" value="7" class="slider">
<div class="slider-labels">
<span>Calm</span>
<span id="proEnergyValue">7</span>
<span>Intense</span>
</div>
</div>
</div>
<div class="form-group">
<label for="proExcitement">Excitement Level</label>
<div class="slider-container">
<input type="range" name="proExcitement" id="proExcitement" min="1" max="10" value="6" class="slider">
<div class="slider-labels">
<span>Relaxed</span>
<span id="proExcitementValue">6</span>
<span>Thrilling</span>
</div>
</div>
</div>
<div class="form-group">
<label for="proDanceability">Danceability</label>
<div class="slider-container">
<input type="range" name="proDanceability" id="proDanceability" min="1" max="10" value="5" class="slider">
<div class="slider-labels">
<span>Static</span>
<span id="proDanceabilityValue">5</span>
<span>Groovy</span>
</div>
</div>
</div>
</div>
</div>
<!-- Pro Prompt Section -->
<div class="pro-section">
<h4><i class="fas fa-edit"></i> <?= t('create.pro_prompt') ?></h4>
<div class="form-group">
<label for="proPrompt"><?= t('create.pro_prompt_label') ?></label>
<textarea name="proPrompt" id="proPrompt" class="form-input" rows="8" placeholder="<?= t('create.lyrics_placeholder') ?>" maxlength="5000"></textarea>
<div class="char-count">0/5000</div>
</div>
<div class="form-group">
<label for="proTags"><?= t('create.pro_tags') ?></label>
<input type="text" name="proTags" id="proTags" class="form-input" placeholder="<?= t('create.tags_placeholder') ?>">
</div>
</div>
</div>
<div class="form-actions">
<button type="submit" id="createBtn" class="btn btn-primary">
<i class="fas fa-magic"></i> <?= t('create.submit') ?>
</button>
<div class="credits-info <?= ($_SESSION['credits'] ?? 5) <= 2 ? 'low-credits' : '' ?>">
<i class="fas fa-coins"></i> <?= t('create.cost') ?>: <span id="creditCost">1</span> <?= t('create.credit') ?> (<?= t('create.you_have') ?> <?= $_SESSION['credits'] ?? 5 ?> <?= t('create.credits') ?>)
<?php if (($_SESSION['credits'] ?? 5) <= 2): ?>
<span class="credit-warning"><?= t('create.low_credits_warning') ?></span>
<?php endif; ?>
</div>
</div>
</form>
<!-- Loading State -->
<div id="loading" class="loading-state" style="display: none;">
<div class="loading-content">
<div class="loading-spinner"></div>
<h3>🎵 <?= t('create.generating_music') ?></h3>
<p id="loadingMessage"><?= t('create.connecting_service') ?></p>
<div class="progress-bar">
<div class="progress-fill"></div>
</div>
<p class="loading-note"><?= t('create.generation_time') ?></p>
</div>
</div>
<!-- Results -->
<div id="results" class="results-section" style="display: none;">
<div class="results-content">
<h3><?= t('create.music_ready') ?></h3>
<div class="results-actions">
<a id="downloadBtn" href="#" class="btn btn-success" download>
<i class="fas fa-download"></i> <?= t('create.download') ?>
</a>
<button class="btn btn-secondary" onclick="location.reload()">
<i class="fas fa-plus"></i> <?= t('create.create_another') ?>
</button>
</div>
</div>
</div>
<?php endif; ?>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section id="features" class="features">
<div class="container">
<div class="section-header">
<h2 class="section-title"><?= t('home.features_title') ?></h2>
<p class="section-subtitle"><?= t('home.features_subtitle') ?></p>
</div>
<?php
$feature_cards = [
['icon' => 'fas fa-brain', 'title' => 'home.feature.ai_models', 'desc' => 'home.feature.ai_models_desc'],
['icon' => 'fas fa-chart-line', 'title' => 'home.feature.analytics', 'desc' => 'home.feature.analytics_desc'],
['icon' => 'fas fa-users', 'title' => 'home.feature.community', 'desc' => 'home.feature.community_desc', 'url' => '/community_fixed.php'],
['icon' => 'fas fa-headphones', 'title' => 'home.feature.player', 'desc' => 'home.feature.player_desc', 'url' => '/community_fixed.php#vip-playlist'],
['icon' => 'fas fa-database', 'title' => 'home.feature.library', 'desc' => 'home.feature.library_desc'],
['icon' => 'fas fa-code', 'title' => 'home.feature.api', 'desc' => 'home.feature.api_desc'],
['icon' => 'fas fa-music', 'title' => 'home.feature.music_types', 'desc' => 'home.feature.music_types_desc'],
['icon' => 'fas fa-dollar-sign', 'title' => 'home.feature.earnings', 'desc' => 'home.feature.earnings_desc'],
['icon' => 'fas fa-share-alt', 'title' => 'home.feature.social', 'desc' => 'home.feature.social_desc', 'url' => '/community_fixed.php'],
['icon' => 'fas fa-cog', 'title' => 'home.feature.parameters', 'desc' => 'home.feature.parameters_desc'],
['icon' => 'fas fa-shield-alt', 'title' => 'home.feature.security', 'desc' => 'home.feature.security_desc'],
['icon' => 'fas fa-credit-card', 'title' => 'home.feature.pricing', 'desc' => 'home.feature.pricing_desc'],
['icon' => 'fas fa-waveform', 'title' => 'home.feature.variations', 'desc' => 'home.feature.variations_desc'],
['icon' => 'fas fa-user-tie', 'title' => 'home.feature.profiles', 'desc' => 'home.feature.profiles_desc', 'url' => '/artist_profile.php?id=3'],
['icon' => 'fas fa-shopping-cart', 'title' => 'home.feature.marketplace', 'desc' => 'home.feature.marketplace_desc', 'url' => '/community_fixed.php#marketplace']
];
?>
<div class="features-grid">
<?php foreach ($feature_cards as $card): ?>
<?php if (!empty($card['url'])): ?>
<a href="<?= htmlspecialchars($card['url']) ?>" class="feature-card feature-card-link">
<i class="<?= htmlspecialchars($card['icon']) ?> feature-icon"></i>
<h3 class="feature-title"><?= t($card['title']) ?></h3>
<p class="feature-description"><?= t($card['desc']) ?></p>
</a>
<?php else: ?>
<div class="feature-card">
<i class="<?= htmlspecialchars($card['icon']) ?> feature-icon"></i>
<h3 class="feature-title"><?= t($card['title']) ?></h3>
<p class="feature-description"><?= t($card['desc']) ?></p>
</div>
<?php endif; ?>
<?php endforeach; ?>
</div>
</div>
</section>
<!-- Pricing Section -->
<section id="pricing" class="pricing">
<div class="container">
<div class="section-header">
<h2 class="section-title"><?= t('home.pricing_title') ?></h2>
<p class="section-subtitle"><?= t('home.pricing_subtitle') ?></p>
</div>
<?php
// Load subscription plans config
$plans_config = require __DIR__ . '/config/subscription_plans.php';
$plan_order = ['essential', 'starter', 'pro', 'premium', 'enterprise'];
?>
<div class="credits-packages">
<?php foreach ($plan_order as $index => $plan_key):
$plan = $plans_config[$plan_key];
$plan_display_name = getPlanLabel($plan_key, $plan['name']);
$is_featured = $plan_key === 'pro'; // Pro is featured
?>
<div class="credit-package <?= $is_featured ? 'featured' : '' ?>">
<?php if ($is_featured): ?>
<div class="package-badge"><?= t('home.most_popular') ?></div>
<?php endif; ?>
<div class="package-icon" style="color: <?= $plan['color'] ?>;">
<i class="fas <?= $plan['icon'] ?>"></i>
</div>
<h3 class="package-name"><?= htmlspecialchars($plan_display_name) ?></h3>
<div class="package-credits"><?= $plan['tracks_per_month'] ?> <?= t('home.tracks_per_month') ?></div>
<div class="package-price">
<span class="current-price" style="color: <?= $plan['color'] ?>;">$<?= number_format($plan['price'], 2) ?></span>
<span class="per-credit"><?= t('home.per_month') ?></span>
</div>
<div class="special-badge" style="background: linear-gradient(135deg, <?= $plan['color'] ?>, <?= $plan['color'] ?>dd);"><?= t('dropdown.subscription') ?></div>
<ul class="package-features">
<?php
// Translation mapping for plan features
$feature_translations = [
'5 tracks per month' => t('plan.feature.tracks_per_month', ['count' => 5]),
'20 tracks per month' => t('plan.feature.tracks_per_month', ['count' => 20]),
'75 tracks per month' => t('plan.feature.tracks_per_month', ['count' => 75]),
'200 tracks per month' => t('plan.feature.tracks_per_month', ['count' => 200]),
'1000 tracks per month' => t('plan.feature.tracks_per_month', ['count' => 1000]),
'Monthly reset' => t('plan.feature.monthly_reset'),
'Basic AI models' => t('plan.feature.basic_ai_models'),
'Advanced AI models' => t('plan.feature.advanced_ai_models'),
'Standard generation speed' => t('plan.feature.standard_speed'),
'High-speed generation' => t('plan.feature.high_speed'),
'Personal use license' => t('plan.feature.personal_license'),
'Commercial use license' => t('plan.feature.commercial_license'),
'Cancel anytime' => t('plan.feature.cancel_anytime'),
'Priority queue access' => t('plan.feature.priority_queue'),
'Highest priority queue' => t('plan.feature.highest_priority'),
'Unlimited downloads' => t('plan.feature.unlimited_downloads'),
'API access' => t('plan.feature.api_access'),
'Full API access' => t('plan.feature.full_api_access'),
'Dedicated support' => t('plan.feature.dedicated_support'),
'White-label options' => t('plan.feature.white_label'),
'Dedicated account manager' => t('plan.feature.account_manager'),
'Custom integrations' => t('plan.feature.custom_integrations'),
'SLA guarantee' => t('plan.feature.sla_guarantee'),
];
foreach (array_slice($plan['features'], 0, 6) as $feature):
$translated_feature = $feature_translations[$feature] ?? $feature;
?>
<li><?= htmlspecialchars($translated_feature) ?></li>
<?php endforeach; ?>
</ul>
<button class="purchase-btn" onclick="window.location.href='/subscribe.php?plan=<?= $plan_key ?>'" style="background: linear-gradient(135deg, <?= $plan['color'] ?>, <?= $plan['color'] ?>dd);">
<i class="fas fa-sync-alt"></i>
<?= t('home.subscribe_now') ?>
</button>
</div>
<?php endforeach; ?>
</div>
<!-- Free Plan & Extra Credits Section -->
<div style="margin-top: 60px; padding-top: 60px; border-top: 2px solid #333;">
<div class="section-header">
<h2 class="section-title" style="font-size: 2rem;"><?= t('home.other_options') ?></h2>
<p class="section-subtitle"><?= t('home.other_options_subtitle') ?></p>
</div>
<!-- Subscription Requirement Notice for Credit Packages -->
<div style="background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1)); border: 1px solid rgba(102, 126, 234, 0.3); border-radius: 12px; padding: 2rem; margin-bottom: 3rem; max-width: 1000px; margin-left: auto; margin-right: auto;">
<div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;">
<i class="fas fa-info-circle" style="font-size: 2rem; color: #667eea;"></i>
<h3 style="margin: 0; font-size: 1.8rem; color: #fff;"><?= t('home.credits_subscription_required_title') ?></h3>
</div>
<p style="margin: 0; font-size: 1.4rem; color: #a0aec0; line-height: 1.6;">
<?= t('home.credits_subscription_required_message') ?>
</p>
</div>
<div class="credits-packages" style="grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); max-width: 1000px; margin: 0 auto;">
<!-- Free Package -->
<div class="credit-package">
<div class="package-icon">
<i class="fas fa-gift"></i>
</div>
<h3 class="package-name"><?= t('home.free') ?></h3>
<div class="package-credits">5 <?= t('user.credits') ?></div>
<div class="package-price">
<span class="current-price">$0</span>
<span class="per-credit"><?= t('home.free_forever') ?></span>
</div>
<div class="free-badge"><?= t('home.free_plan') ?></div>
<ul class="package-features">
<li><?= t('home.free_feature_1') ?></li>
<li><?= t('home.free_feature_2') ?></li>
<li><?= t('home.free_feature_3') ?></li>
<li><?= t('home.free_feature_4') ?></li>
<li><?= t('home.free_feature_5') ?></li>
</ul>
<button class="purchase-btn" onclick="window.location.href='/auth/register.php'">
<i class="fas fa-user-plus"></i>
<?= t('home.sign_up_free') ?>
</button>
</div>
<!-- Starter Credits Package -->
<div class="credit-package">
<div class="package-icon">
<i class="fas fa-star"></i>
</div>
<h3 class="package-name"><?= t('credits.starter_credits') ?></h3>
<div class="package-credits">30 <?= t('user.credits') ?></div>
<div class="package-price">
<span class="original-price">$29.99</span>
<span class="current-price">$19.99</span>
<span class="per-credit">$0.67 <?= t('common.per_track') ?></span>
</div>
<div class="special-badge"><?= t('credits.one_time_purchase') ?></div>
<ul class="package-features">
<li><?= t('credits.music_tracks', ['count' => 30]) ?></li>
<li><?= t('plan.feature.advanced_ai_models') ?></li>
<li><?= t('plan.feature.high_speed') ?></li>
<li><?= t('plan.feature.priority_queue') ?></li>
<li><?= t('credits.ad_free') ?></li>
<li><?= t('plan.feature.commercial_license') ?></li>
</ul>
<button class="purchase-btn" onclick="window.location.href='/credits.php'" style="background: linear-gradient(135deg, #667eea, #764ba2);">
<i class="fas fa-shopping-cart"></i>
<?= t('credits.purchase_now') ?>
</button>
</div>
<!-- Pro Credits Package -->
<div class="credit-package featured">
<div class="package-badge"><?= t('credits.best_value') ?></div>
<div class="package-icon">
<i class="fas fa-fire"></i>
</div>
<h3 class="package-name"><?= t('credits.pro_credits') ?></h3>
<div class="package-credits">150 <?= t('user.credits') ?></div>
<div class="package-price">
<span class="original-price">$59</span>
<span class="current-price">$49</span>
<span class="per-credit">$0.33 <?= t('common.per_track') ?></span>
</div>
<div class="special-badge"><?= t('credits.one_time_purchase') ?></div>
<ul class="package-features">
<li><?= t('credits.music_tracks', ['count' => 150]) ?></li>
<li><?= t('plan.feature.advanced_ai_models') ?></li>
<li><?= t('plan.feature.high_speed') ?></li>
<li><?= t('plan.feature.priority_queue') ?></li>
<li><?= t('credits.ad_free') ?></li>
<li><?= t('plan.feature.commercial_license') ?></li>
</ul>
<button class="purchase-btn" onclick="window.location.href='/credits.php'" style="background: linear-gradient(135deg, #f59e0b, #d97706);">
<i class="fas fa-shopping-cart"></i>
<?= t('credits.purchase_now') ?>
</button>
</div>
<!-- Premium Credits Package -->
<div class="credit-package">
<div class="package-icon">
<i class="fas fa-crown"></i>
</div>
<h3 class="package-name"><?= t('credits.premium_credits') ?></h3>
<div class="package-credits">500 <?= t('user.credits') ?></div>
<div class="package-price">
<span class="original-price">$179</span>
<span class="current-price">$129</span>
<span class="per-credit">$0.26 <?= t('common.per_track') ?></span>
</div>
<div class="special-badge"><?= t('credits.one_time_purchase') ?></div>
<ul class="package-features">
<li><?= t('credits.music_tracks', ['count' => 500]) ?></li>
<li><?= t('plan.feature.advanced_ai_models') ?></li>
<li><?= t('plan.feature.high_speed') ?></li>
<li><?= t('plan.feature.priority_queue') ?></li>
<li><?= t('credits.ad_free') ?></li>
<li><?= t('plan.feature.commercial_license') ?></li>
</ul>
<button class="purchase-btn" onclick="window.location.href='/credits.php'" style="background: linear-gradient(135deg, #8b5cf6, #7c3aed);">
<i class="fas fa-shopping-cart"></i>
<?= t('credits.purchase_now') ?>
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section class="testimonials">
<div class="container">
<div class="section-header">
<h2 class="section-title"><?= t('home.testimonials_title') ?></h2>
<p class="section-subtitle"><?= t('home.testimonials_subtitle') ?></p>
</div>
<div class="testimonials-grid">
<!-- Testimonial 1 -->
<div class="testimonial-card">
<div class="testimonial-avatar">
<div style="width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(135deg, #48bb78, #38a169); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.8rem; font-weight: 700;">MJ</div>
</div>
<p class="testimonial-text"><?= t('home.testimonial_1_text') ?></p>
<div class="testimonial-author">
<div class="testimonial-author-name"><?= t('home.testimonial_1_name') ?></div>
<div class="testimonial-author-role"><?= t('home.testimonial_1_role') ?></div>
</div>
</div>
<!-- Testimonial 2 -->
<div class="testimonial-card">
<div class="testimonial-avatar">
<div style="width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(135deg, #667eea, #764ba2); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.8rem; font-weight: 700;">RK</div>
</div>
<p class="testimonial-text"><?= t('home.testimonial_2_text') ?></p>
<div class="testimonial-author">
<div class="testimonial-author-name"><?= t('home.testimonial_2_name') ?></div>
<div class="testimonial-author-role"><?= t('home.testimonial_2_role') ?></div>
</div>
</div>
<!-- Testimonial 3 -->
<div class="testimonial-card">
<div class="testimonial-avatar">
<div style="width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(135deg, #f59e0b, #d97706); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.8rem; font-weight: 700;">DS</div>
</div>
<p class="testimonial-text"><?= t('home.testimonial_3_text') ?></p>
<div class="testimonial-author">
<div class="testimonial-author-name"><?= t('home.testimonial_3_name') ?></div>
<div class="testimonial-author-role"><?= t('home.testimonial_3_role') ?></div>
</div>
</div>
<!-- Testimonial 4 -->
<div class="testimonial-card">
<div class="testimonial-avatar">
<div style="width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(135deg, #8b5cf6, #7c3aed); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.8rem; font-weight: 700;">TW</div>
</div>
<p class="testimonial-text"><?= t('home.testimonial_4_text') ?></p>
<div class="testimonial-author">
<div class="testimonial-author-name"><?= t('home.testimonial_4_name') ?></div>
<div class="testimonial-author-role"><?= t('home.testimonial_4_role') ?></div>
</div>
</div>
<!-- Testimonial 5 -->
<div class="testimonial-card">
<div class="testimonial-avatar">
<div style="width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(135deg, #ec4899, #db2777); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.8rem; font-weight: 700;">AL</div>
</div>
<p class="testimonial-text"><?= t('home.testimonial_5_text') ?></p>
<div class="testimonial-author">
<div class="testimonial-author-name"><?= t('home.testimonial_5_name') ?></div>
<div class="testimonial-author-role"><?= t('home.testimonial_5_role') ?></div>
</div>
</div>
<!-- Testimonial 6 -->
<div class="testimonial-card">
<div class="testimonial-avatar">
<div style="width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(135deg, #06b6d4, #0891b2); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.8rem; font-weight: 700;">JB</div>
</div>
<p class="testimonial-text"><?= t('home.testimonial_6_text') ?></p>
<div class="testimonial-author">
<div class="testimonial-author-name"><?= t('home.testimonial_6_name') ?></div>
<div class="testimonial-author-role"><?= t('home.testimonial_6_role') ?></div>
</div>
</div>
<!-- Testimonial 7 -->
<div class="testimonial-card">
<div class="testimonial-avatar">
<div style="width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(135deg, #10b981, #059669); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.8rem; font-weight: 700;">CM</div>
</div>
<p class="testimonial-text"><?= t('home.testimonial_7_text') ?></p>
<div class="testimonial-author">
<div class="testimonial-author-name"><?= t('home.testimonial_7_name') ?></div>
<div class="testimonial-author-role"><?= t('home.testimonial_7_role') ?></div>
</div>
</div>
<!-- Testimonial 8 -->
<div class="testimonial-card">
<div class="testimonial-avatar">
<div style="width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(135deg, #f97316, #ea580c); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.8rem; font-weight: 700;">SG</div>
</div>
<p class="testimonial-text"><?= t('home.testimonial_8_text') ?></p>
<div class="testimonial-author">
<div class="testimonial-author-name"><?= t('home.testimonial_8_name') ?></div>
<div class="testimonial-author-role"><?= t('home.testimonial_8_role') ?></div>
</div>
</div>
<!-- Testimonial 9 -->
<div class="testimonial-card">
<div class="testimonial-avatar">
<div style="width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(135deg, #6366f1, #4f46e5); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.8rem; font-weight: 700;">MF</div>
</div>
<p class="testimonial-text"><?= t('home.testimonial_9_text') ?></p>
<div class="testimonial-author">
<div class="testimonial-author-name"><?= t('home.testimonial_9_name') ?></div>
<div class="testimonial-author-role"><?= t('home.testimonial_9_role') ?></div>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="cta">
<div class="container">
<div class="cta-content">
<h2 class="cta-title"><?= t('home.cta_title') ?></h2>
<p class="cta-description"><?= t('home.cta_description') ?></p>
<a href="#create" class="btn btn-primary">🎵 <?= t('btn.start_creating') ?></a>
</div>
</div>
</section>
<!-- FAQ Section -->
<section id="faq" class="faq-section" style="padding: 6rem 0; background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);">
<div class="container">
<div class="section-header">
<h2 class="section-title" style="color: #fff; font-size: 4rem; margin-bottom: 1rem;"><?= t('faq.title') ?></h2>
<p class="section-subtitle" style="color: #a0aec0; font-size: 1.6rem;"><?= t('faq.subtitle') ?></p>
</div>
<div style="max-width: 900px; margin: 4rem auto 0;">
<div class="faq-item" style="background: rgba(255,255,255,0.05); border: 1px solid rgba(102, 126, 234, 0.2); border-radius: 16px; padding: 2.5rem; margin-bottom: 2rem; backdrop-filter: blur(10px);">
<h3 style="color: #667eea; font-size: 2rem; margin-bottom: 1rem; font-weight: 700;"><?= t('faq.q1.question') ?></h3>
<p style="color: #e2e8f0; font-size: 1.6rem; line-height: 1.8;"><?= t('faq.q1.answer') ?></p>
</div>
<div class="faq-item" style="background: rgba(255,255,255,0.05); border: 1px solid rgba(102, 126, 234, 0.2); border-radius: 16px; padding: 2.5rem; margin-bottom: 2rem; backdrop-filter: blur(10px);">
<h3 style="color: #667eea; font-size: 2rem; margin-bottom: 1rem; font-weight: 700;"><?= t('faq.q2.question') ?></h3>
<p style="color: #e2e8f0; font-size: 1.6rem; line-height: 1.8;"><?= t('faq.q2.answer') ?></p>
</div>
<div class="faq-item" style="background: rgba(255,255,255,0.05); border: 1px solid rgba(102, 126, 234, 0.2); border-radius: 16px; padding: 2.5rem; margin-bottom: 2rem; backdrop-filter: blur(10px);">
<h3 style="color: #667eea; font-size: 2rem; margin-bottom: 1rem; font-weight: 700;"><?= t('faq.q3.question') ?></h3>
<p style="color: #e2e8f0; font-size: 1.6rem; line-height: 1.8;"><?= t('faq.q3.answer') ?></p>
</div>
<div class="faq-item" style="background: rgba(255,255,255,0.05); border: 1px solid rgba(102, 126, 234, 0.2); border-radius: 16px; padding: 2.5rem; margin-bottom: 2rem; backdrop-filter: blur(10px);">
<h3 style="color: #667eea; font-size: 2rem; margin-bottom: 1rem; font-weight: 700;"><?= t('faq.q4.question') ?></h3>
<p style="color: #e2e8f0; font-size: 1.6rem; line-height: 1.8;"><?= t('faq.q4.answer') ?></p>
</div>
<div class="faq-item" style="background: rgba(255,255,255,0.05); border: 1px solid rgba(102, 126, 234, 0.2); border-radius: 16px; padding: 2.5rem; margin-bottom: 2rem; backdrop-filter: blur(10px);">
<h3 style="color: #667eea; font-size: 2rem; margin-bottom: 1rem; font-weight: 700;"><?= t('faq.q5.question') ?></h3>
<p style="color: #e2e8f0; font-size: 1.6rem; line-height: 1.8;"><?= t('faq.q5.answer') ?></p>
</div>
<div class="faq-item" style="background: rgba(255,255,255,0.05); border: 1px solid rgba(102, 126, 234, 0.2); border-radius: 16px; padding: 2.5rem; margin-bottom: 2rem; backdrop-filter: blur(10px);">
<h3 style="color: #667eea; font-size: 2rem; margin-bottom: 1rem; font-weight: 700;"><?= t('faq.q6.question') ?></h3>
<p style="color: #e2e8f0; font-size: 1.6rem; line-height: 1.8;"><?= t('faq.q6.answer') ?></p>
</div>
</div>
</div>
</section>
<script>
// Check if user is logged in
<?php
if (!isset($_SESSION['user_id'])) {
// echo "window.location.href = '/auth/login.php';"; // Redirect disabled
}
?>
// Secure API Configuration (no sensitive data exposed)
const API_ENDPOINT = window.location.protocol + '//' + window.location.host + '/api.php';
// DOM Elements for create music
const createBtn = document.getElementById('createBtn');
const loading = document.getElementById('loading');
const results = document.getElementById('results');
const audioElement = document.getElementById('audioElement');
const downloadBtn = document.getElementById('downloadBtn');
// Debug all DOM elements
console.log('🎵 DOM Elements check:');
console.log('- createBtn:', createBtn);
console.log('- loading:', loading);
console.log('- results:', results);
console.log('- audioElement:', audioElement);
console.log('- downloadBtn:', downloadBtn);
if (createBtn) {
console.log('🎵 Create button properties:', {
id: createBtn.id,
className: createBtn.className,
disabled: createBtn.disabled,
style: createBtn.style.cssText,
onclick: createBtn.onclick,
innerHTML: createBtn.innerHTML.substring(0, 100) + '...'
});
} else {
console.error('🎵 ERROR: createBtn element not found!');
}
// Character count updates
function updateCharCount(element, maxLength) {
const count = element.value.length;
const countElement = element.parentNode.querySelector('.char-count');
if (countElement) {
countElement.textContent = `${count}/${maxLength}`;
countElement.style.color = count > maxLength ? '#ef4444' : '#a0aec0';
}
}
// Update credit cost based on mode and variations
function updateCreditCost() {
// All modes cost 1 credit regardless of variations
const totalCost = 1;
const creditCostElement = document.getElementById('creditCost');
if (creditCostElement) {
creditCostElement.textContent = totalCost;
}
// Update cost display styling based on mode
const costDisplay = document.querySelector('.credit-cost-display');
if (costDisplay) {
costDisplay.className = 'credit-cost-display';
if (isAdvanced) {
costDisplay.classList.add('advanced-cost');
} else if (isPro) {
costDisplay.classList.add('pro-cost');
}
}
}
// Character count listeners
document.getElementById('simpleTitle')?.addEventListener('input', (e) => updateCharCount(e.target, 80));
document.getElementById('simplePrompt')?.addEventListener('input', (e) => updateCharCount(e.target, 400));
document.getElementById('title')?.addEventListener('input', (e) => updateCharCount(e.target, 80));
document.getElementById('advancedPrompt')?.addEventListener('input', (e) => updateCharCount(e.target, 2000));
document.getElementById('proTitle')?.addEventListener('input', (e) => updateCharCount(e.target, 80));
// Pro mode: Dynamic limit switching - shows 2000 until 2001 chars, then switches to 5000
document.getElementById('proPrompt')?.addEventListener('input', (e) => {
const length = e.target.value.length;
const maxLength = length > 2000 ? 5000 : 2000;
updateCharCount(e.target, maxLength);
});
document.getElementById('variations')?.addEventListener('change', updateCreditCost);
document.getElementById('proVariations')?.addEventListener('change', updateCreditCost);
// Initialize character counts on page load
const initCharCounts = () => {
const simpleTitle = document.getElementById('simpleTitle');
const simplePrompt = document.getElementById('simplePrompt');
const title = document.getElementById('title');
const advancedPrompt = document.getElementById('advancedPrompt');
const proTitle = document.getElementById('proTitle');
const proPrompt = document.getElementById('proPrompt');
if (simpleTitle) updateCharCount(simpleTitle, 80);
if (simplePrompt) updateCharCount(simplePrompt, 400);
if (title) updateCharCount(title, 80);
if (advancedPrompt) updateCharCount(advancedPrompt, 2000);
if (proTitle) updateCharCount(proTitle, 80);
// Pro mode: Initialize with dynamic limit based on current length
if (proPrompt) {
const length = proPrompt.value.length;
const maxLength = length > 2000 ? 5000 : 2000;
updateCharCount(proPrompt, maxLength);
}
};
// Initialize on DOM ready
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initCharCounts);
} else {
initCharCounts();
}
// Simple form validation and mode switching
console.log('🎵 Setting up form functionality');
// Initialize credit cost on page load
updateCreditCost();
// Mode switching
document.querySelectorAll('.mode-option').forEach(option => {
option.addEventListener('click', () => {
const mode = option.dataset.mode;
// Update active mode
document.querySelectorAll('.mode-option').forEach(opt => opt.classList.remove('active'));
option.classList.add('active');
// Show/hide forms
document.querySelectorAll('.form-mode').forEach(form => form.classList.remove('active'));
document.getElementById(mode + 'Form').classList.add('active');
// Update credit cost
updateCreditCost();
});
});
// Slider value updates
document.getElementById('energy')?.addEventListener('input', (e) => {
document.getElementById('energyValue').textContent = e.target.value;
});
document.getElementById('excitement')?.addEventListener('input', (e) => {
document.getElementById('excitementValue').textContent = e.target.value;
});
// Pro Mode slider updates
document.getElementById('proReverb')?.addEventListener('input', (e) => {
document.getElementById('proReverbValue').textContent = e.target.value;
});
document.getElementById('proCompression')?.addEventListener('input', (e) => {
document.getElementById('proCompressionValue').textContent = e.target.value;
});
document.getElementById('proStereoWidth')?.addEventListener('input', (e) => {
document.getElementById('proStereoWidthValue').textContent = e.target.value;
});
document.getElementById('proBassLevel')?.addEventListener('input', (e) => {
document.getElementById('proBassLevelValue').textContent = e.target.value;
});
document.getElementById('proMidLevel')?.addEventListener('input', (e) => {
document.getElementById('proMidLevelValue').textContent = e.target.value;
});
document.getElementById('proTrebleLevel')?.addEventListener('input', (e) => {
document.getElementById('proTrebleLevelValue').textContent = e.target.value;
});
document.getElementById('proEnergy')?.addEventListener('input', (e) => {
document.getElementById('proEnergyValue').textContent = e.target.value;
});
document.getElementById('proExcitement')?.addEventListener('input', (e) => {
document.getElementById('proExcitementValue').textContent = e.target.value;
});
document.getElementById('proDanceability')?.addEventListener('input', (e) => {
document.getElementById('proDanceabilityValue').textContent = e.target.value;
});
// Update form fields based on mode
function updateFormFields() {
const isAdvanced = document.querySelector('.mode-option[data-mode="advanced"]')?.classList.contains('active') || false;
const isPro = document.querySelector('.mode-option[data-mode="pro"]')?.classList.contains('active') || false;
const form = document.getElementById('musicForm');
if (form) {
// Set default character limit for prompt (customMode is always false now)
const simplePrompt = document.getElementById('simplePrompt');
if (simplePrompt) {
simplePrompt.maxLength = 400;
// Update character count display
const charCount = simplePrompt.parentElement.querySelector('.char-count');
if (charCount) {
const currentLength = simplePrompt.value.length;
charCount.textContent = `${currentLength}/400`;
}
}
// Update duration field - sync select to hidden field
const durationSelect = document.getElementById('duration');
const proDurationSelect = document.getElementById('proDuration');
const hiddenDuration = document.getElementById('hiddenDuration');
// Check if duration select is actually visible (not just in DOM)
const isDurationSelectVisible = durationSelect && durationSelect.offsetParent !== null;
const isProDurationSelectVisible = proDurationSelect && proDurationSelect.offsetParent !== null;
if (isPro && isProDurationSelectVisible && hiddenDuration) {
// Pro mode: use proDuration dropdown (values are already in seconds)
const durationValue = proDurationSelect.value || '180';
hiddenDuration.value = durationValue;
} else if (isAdvanced && isDurationSelectVisible && hiddenDuration) {
// Advanced mode: use duration dropdown (values are already in seconds)
const durationValue = durationSelect.value || '180';
hiddenDuration.value = durationValue;
} else {
// Simple mode: check if there's a duration input, otherwise default to 360
if (hiddenDuration) {
// Simple mode doesn't have a visible duration field, so keep default 360
// But if user somehow sets it, use that value
if (!hiddenDuration.value || hiddenDuration.value === '360') {
hiddenDuration.value = '360'; // Default 6 minutes for Simple Mode
}
}
}
// Update model_name field based on mode
let modelNameHidden = form.querySelector('input[name="model_name"]');
if (!modelNameHidden) {
modelNameHidden = document.createElement('input');
modelNameHidden.type = 'hidden';
modelNameHidden.name = 'model_name';
form.appendChild(modelNameHidden);
}
if (isAdvanced) {
const modelVersionSelect = document.getElementById('modelVersion');
if (modelVersionSelect) {
modelNameHidden.value = modelVersionSelect.value;
}
} else if (isPro) {
const proModelSelect = document.getElementById('proModel');
if (proModelSelect) {
modelNameHidden.value = proModelSelect.value;
}
}
console.log('🎵 Form updated - Advanced mode:', isAdvanced, 'Pro mode:', isPro);
console.log('🎵 Model name value:', modelNameHidden?.value);
console.log('🎵 Duration value:', hiddenDuration?.value);
}
}
// Update form when mode changes
document.querySelectorAll('.mode-option').forEach(option => {
option.addEventListener('click', () => {
const mode = option.dataset.mode;
const hiddenDuration = document.getElementById('hiddenDuration');
// When switching to Simple Mode, ensure duration is 360 (6 minutes)
if (mode === 'simple' && hiddenDuration) {
hiddenDuration.value = '360'; // 6 minutes default for Simple Mode
}
setTimeout(updateFormFields, 100); // Small delay to ensure DOM is updated
});
});
// Update form when model version changes
document.getElementById('modelVersion')?.addEventListener('change', updateFormFields);
document.getElementById('proModel')?.addEventListener('change', updateFormFields);
// Update duration when select changes (only for Advanced/Pro modes)
document.getElementById('duration')?.addEventListener('change', function() {
// Only update if Advanced mode is active
const isAdvanced = document.querySelector('.mode-option[data-mode="advanced"]')?.classList.contains('active');
if (isAdvanced) {
updateFormFields();
}
});
document.getElementById('proDuration')?.addEventListener('change', function() {
// Only update if Pro mode is active
const isPro = document.querySelector('.mode-option[data-mode="pro"]')?.classList.contains('active');
if (isPro) {
updateFormFields();
}
});
// Initial form setup
updateFormFields();
// Simple form submission handling
const form = document.getElementById('musicForm');
if (form) {
form.addEventListener('submit', function(e) {
console.log('🎵 Form submitted!');
// Duration values from dropdowns are already in seconds, no parsing needed
const hiddenDuration = document.getElementById('hiddenDuration');
if (hiddenDuration && !hiddenDuration.value) {
// Fallback to default if somehow empty
hiddenDuration.value = '180';
}
// Basic validation - check which mode is active
const isAdvanced = document.querySelector('.mode-option[data-mode="advanced"]')?.classList.contains('active') || false;
const isPro = document.querySelector('.mode-option[data-mode="pro"]')?.classList.contains('active') || false;
if (isPro) {
// PRO mode validation - check proPrompt field
const proPrompt = document.getElementById('proPrompt')?.value?.trim();
if (!proPrompt) {
e.preventDefault();
alert('Please enter your professional prompt with style and lyrics');
return false;
}
} else if (isAdvanced) {
const title = document.getElementById('title')?.value?.trim();
const advancedPrompt = document.getElementById('advancedPrompt')?.value?.trim();
if (!title || !advancedPrompt) {
e.preventDefault();
alert('Please fill in all required fields: Title and Lyrics/Prompt');
return false;
}
} else {
// Simple mode validation
const simplePrompt = document.getElementById('simplePrompt')?.value?.trim();
if (!simplePrompt) {
e.preventDefault();
alert('Please describe the music you want to create');
return false;
}
}
// Show loading state
const createBtn = document.getElementById('createBtn');
if (createBtn) {
createBtn.disabled = true;
createBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Generating...';
}
console.log('🎵 Form validation passed, submitting...');
});
}
// Smooth scrolling for navigation links
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 some interactive effects
document.addEventListener('DOMContentLoaded', function() {
// Add parallax effect to hero section
window.addEventListener('scroll', function() {
const scrolled = window.pageYOffset;
const hero = document.querySelector('.hero');
if (hero) {
hero.style.transform = `translateY(${scrolled * 0.5}px)`;
}
});
// Add typing effect to hero title
const heroTitle = document.querySelector('.hero-title');
if (heroTitle) {
const text = heroTitle.textContent;
heroTitle.textContent = '';
let i = 0;
const typeWriter = () => {
if (i < text.length) {
heroTitle.textContent += text.charAt(i);
i++;
setTimeout(typeWriter, 50);
}
};
setTimeout(typeWriter, 1000);
}
});
</script>
<script>
// Homepage functionality using global player - SIMPLIFIED LIKE COMMUNITY PAGE
// Initialize homepage (preserve existing playback during AJAX navigation)
function initializeHomepage() {
console.log('🎵 Homepage initializing - checking for existing playback');
if (typeof window.enhancedGlobalPlayer !== 'undefined') {
console.log('🎵 Enhanced Global player available');
// Check if music is currently playing - don't interrupt it
const audioElement = document.getElementById('globalAudioElement');
const isCurrentlyPlaying = audioElement && !audioElement.paused;
if (isCurrentlyPlaying) {
console.log('🎵 Music currently playing - preserving playback during homepage load');
// Just ensure player is visible, don't reload playlist
if (window.enhancedGlobalPlayer.showPlayer) {
window.enhancedGlobalPlayer.showPlayer();
}
} else {
console.log('🎵 No music playing - initializing homepage features');
// Show player and load VIP playlist when no music is playing
if (window.enhancedGlobalPlayer.showPlayer) {
window.enhancedGlobalPlayer.showPlayer();
}
// Load VIP playlist for proper track navigation (only when not playing)
if (window.enhancedGlobalPlayer && typeof window.enhancedGlobalPlayer.loadPlaylist === 'function') {
console.log('🎵 Loading VIP playlist for homepage');
window.enhancedGlobalPlayer.loadPlaylist('vip', false); // false = don't auto-play
}
console.log('🎵 Homepage player initialized - ready for user interaction');
}
} else {
console.error('🎵 Enhanced Global player not available');
}
}
// Initialize on DOM ready only - no AJAX conflicts
// Use requestIdleCallback for non-critical initialization to avoid blocking
if ('requestIdleCallback' in window) {
requestIdleCallback(() => {
initializeHomepage();
}, { timeout: 2000 });
} else {
// Fallback for browsers without requestIdleCallback
document.addEventListener('DOMContentLoaded', initializeHomepage);
}
// Use global playTrack function from footer
function playLocalTrack(audioUrl, title, artist) {
console.log('🎵 Homepage calling global playTrack:', { audioUrl, title, artist });
window.playTrack(audioUrl, title, artist);
}
// Feed Section JavaScript
document.addEventListener('DOMContentLoaded', function() {
// Load translations for feed section
const feedTranslations = {
noTracks: '<?= addslashes(t('feed.no_tracks')) ?>',
noSuggestions: '<?= addslashes(t('feed.no_suggestions')) ?>',
noTrending: '<?= addslashes(t('feed.no_trending')) ?>',
loading: '<?= addslashes(t('feed.loading')) ?>',
error: '<?= addslashes(t('feed.error')) ?>',
followers: '<?= addslashes(t('feed.followers')) ?>',
follow: '<?= addslashes(t('feed.follow')) ?>',
following: '<?= addslashes(t('feed.following_btn')) ?>',
untitledTrack: '<?= addslashes(t('community.untitled_track')) ?>',
unknownArtist: '<?= addslashes(t('artists.unknown_artist')) ?>'
};
// Format number with K notation
function formatNumberK(num) {
num = parseInt(num) || 0;
if (num >= 1000000) {
return (num / 1000000).toFixed(1) + 'M';
} else if (num >= 1000) {
return (num / 1000).toFixed(1) + 'K';
}
return num.toString();
}
// Format duration
function formatDuration(seconds) {
if (!seconds) return '0:00';
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins}:${secs.toString().padStart(2, '0')}`;
}
// Escape HTML
function escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
// Extract genre from track
function extractGenre(track) {
if (track.genre) return track.genre;
if (track.metadata) {
try {
const metadata = typeof track.metadata === 'string' ? JSON.parse(track.metadata) : track.metadata;
if (metadata.genre) return metadata.genre;
if (metadata.style) return metadata.style;
} catch (e) {}
}
return 'Electronic';
}
// Render track card
function renderTrackCard(track, container) {
const genre = extractGenre(track);
const genres = genre.split(',').slice(0, 3).map(g => g.trim()).filter(g => g);
const imageUrl = track.image_url || '/assets/images/default-track.jpg';
const audioUrl = track.signed_audio_url || track.audio_url || '';
const duration = formatDuration(track.duration);
return `
<div class="feed-track-card" data-track-id="${track.id}">
<div class="feed-track-image">
<img src="${escapeHtml(imageUrl)}" alt="${escapeHtml(track.title || feedTranslations.untitledTrack)}" loading="lazy">
<div class="feed-track-overlay">
<button class="feed-play-btn"
data-audio-url="${escapeHtml(audioUrl)}"
data-title="${escapeHtml(track.title || feedTranslations.untitledTrack)}"
data-artist="${escapeHtml(track.artist_name || '')}">
<i class="fas fa-play"></i>
</button>
</div>
</div>
<div class="feed-track-info">
<h4 class="feed-track-title">
<a href="/track.php?id=${track.id}">${escapeHtml(track.title || feedTranslations.untitledTrack)}</a>
</h4>
<div class="feed-track-genres">
${genres.map(g => `<span class="feed-genre-tag">${escapeHtml(g)}</span>`).join('')}
</div>
<div class="feed-track-artist">
<a href="/artist_profile.php?id=${track.artist_id}">${escapeHtml(track.artist_name || feedTranslations.unknownArtist)}</a>
</div>
</div>
<div class="feed-track-stats">
<span class="feed-stat">
<i class="fas fa-play"></i>
${formatNumberK(track.play_count || 0)}
</span>
<button class="feed-stat feed-like-btn ${track.user_liked ? 'liked' : ''}"
onclick="toggleTrackLike(${track.id}, this)"
title="${feedTranslations.like || 'Like'}">
<i class="fas fa-heart"></i>
<span class="like-count">${formatNumberK(track.like_count || 0)}</span>
</button>
<button class="feed-stat feed-comment-btn"
onclick="showComments(${track.id})"
title="${feedTranslations.comments || 'Comments'}">
<i class="fas fa-comment"></i>
<span>${formatNumberK(track.comment_count || 0)}</span>
</button>
</div>
</div>
`;
}
// Render creator card
function renderCreatorCard(creator) {
const profileImg = creator.profile_image || null;
const profilePos = creator.profile_position || 'center center';
const initials = creator.name ? creator.name.charAt(0).toUpperCase() : '?';
const handle = '@' + (creator.name ? creator.name.toLowerCase().replace(/\s+/g, '') : 'user');
const isLoggedIn = <?= $user_id ? 'true' : 'false' ?>;
return `
<div class="feed-creator-card" data-creator-id="${creator.id}">
<div class="feed-creator-avatar">
${profileImg ?
`<img src="${escapeHtml(profileImg)}" alt="${escapeHtml(creator.name)}" style="object-position: ${escapeHtml(profilePos)};" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<span style="display:none;">${initials}</span>` :
`<span style="display: flex !important;">${initials}</span>`
}
</div>
<div class="feed-creator-info">
<h4 class="feed-creator-name">
<a href="/artist_profile.php?id=${creator.id}">${escapeHtml(creator.name)}</a>
</h4>
<div class="feed-creator-handle">${handle}</div>
<div class="feed-creator-followers">${formatNumberK(creator.followers_count || 0)} ${feedTranslations.followers}</div>
</div>
${isLoggedIn ?
`<button class="feed-follow-btn" onclick="toggleFollow(${creator.id}, this)">${feedTranslations.follow}</button>` :
`<a href="/auth/login.php" class="feed-follow-btn" style="text-decoration: none; display: inline-block;">${feedTranslations.follow}</a>`
}
</div>
`;
}
// Load feed data
function loadFeedData(timeFilter, scopeFilter) {
const forYouColumn = document.querySelector('.feed-column:first-child .feed-column-content');
const creatorsColumn = document.querySelector('.feed-column:nth-child(2) .feed-column-content');
const trendingColumn = document.querySelector('.feed-column:last-child .feed-column-content');
// Show loading state
[forYouColumn, creatorsColumn, trendingColumn].forEach(col => {
if (col) {
col.innerHTML = `<div class="feed-empty"><i class="fas fa-spinner fa-spin"></i><p>${feedTranslations.loading}</p></div>`;
}
});
// Fetch data
fetch(`/api/get_homepage_feed.php?time=${encodeURIComponent(timeFilter)}&scope=${encodeURIComponent(scopeFilter)}`)
.then(response => response.json())
.then(data => {
if (data.success && data.data) {
// Update For You column
if (forYouColumn) {
if (data.data.for_you && data.data.for_you.length > 0) {
forYouColumn.innerHTML = data.data.for_you.map(track => renderTrackCard(track, forYouColumn)).join('');
} else {
forYouColumn.innerHTML = `<div class="feed-empty"><i class="fas fa-music"></i><p>${feedTranslations.noTracks}</p></div>`;
}
}
// Update Suggested Creators column
if (creatorsColumn) {
if (data.data.suggested_creators && data.data.suggested_creators.length > 0) {
creatorsColumn.innerHTML = data.data.suggested_creators.map(creator => renderCreatorCard(creator)).join('');
} else {
creatorsColumn.innerHTML = `<div class="feed-empty"><i class="fas fa-users"></i><p>${feedTranslations.noSuggestions}</p></div>`;
}
}
// Update Trending column
if (trendingColumn) {
if (data.data.trending && data.data.trending.length > 0) {
trendingColumn.innerHTML = data.data.trending.map(track => renderTrackCard(track, trendingColumn)).join('');
} else {
trendingColumn.innerHTML = `<div class="feed-empty"><i class="fas fa-fire"></i><p>${feedTranslations.noTrending}</p></div>`;
}
}
// Buttons are handled by event delegation, no need to re-initialize
} else {
console.error('Failed to load feed data:', data.message);
[forYouColumn, creatorsColumn, trendingColumn].forEach(col => {
if (col) {
col.innerHTML = `<div class="feed-empty"><i class="fas fa-exclamation-triangle"></i><p>${feedTranslations.error}</p></div>`;
}
});
}
})
.catch(error => {
console.error('Error fetching feed:', error);
[forYouColumn, creatorsColumn, trendingColumn].forEach(col => {
if (col) {
col.innerHTML = `<div class="feed-empty"><i class="fas fa-exclamation-triangle"></i><p>${feedTranslations.error}</p></div>`;
}
});
});
}
// Use event delegation for feed buttons (works for dynamically loaded content)
// Attach to document to ensure it works even after content changes
document.addEventListener('click', function(e) {
// Check if clicked element is a play button or inside one
const playBtn = e.target.closest('.feed-play-btn');
if (playBtn) {
e.preventDefault();
e.stopPropagation();
const audioUrl = playBtn.getAttribute('data-audio-url');
const title = playBtn.getAttribute('data-title');
const artist = playBtn.getAttribute('data-artist');
const isCurrentlyPlaying = playBtn.classList.contains('playing');
console.log('🎵 Feed play button clicked:', { audioUrl, title, artist, isCurrentlyPlaying });
if (audioUrl && audioUrl !== '' && audioUrl !== 'null' && audioUrl !== 'NULL') {
// Check if this button is already in playing state
if (isCurrentlyPlaying) {
// Button shows pause icon - check if global player is playing
const globalPlayer = window.enhancedGlobalPlayer;
const audioElement = document.getElementById('globalAudioElement');
// Check if audio is actually playing
if (audioElement && !audioElement.paused) {
// Pause the currently playing track
console.log('🎵 Pausing current track');
if (globalPlayer) {
if (typeof globalPlayer.togglePlayPause === 'function') {
globalPlayer.togglePlayPause();
} else if (typeof globalPlayer.pause === 'function') {
globalPlayer.pause();
} else if (audioElement) {
audioElement.pause();
}
} else if (audioElement) {
audioElement.pause();
}
// Update all button states
const allButtons = document.querySelectorAll('.feed-play-btn');
allButtons.forEach(btn => {
btn.classList.remove('playing');
const icon = btn.querySelector('i');
if (icon) icon.className = 'fas fa-play';
});
return;
} else {
// Button shows playing but audio is paused - just update button state
playBtn.classList.remove('playing');
const icon = playBtn.querySelector('i');
if (icon) icon.className = 'fas fa-play';
return;
}
}
// Play the track (either new track or resume)
// Update all button states
const allButtons = document.querySelectorAll('.feed-play-btn');
allButtons.forEach(btn => {
btn.classList.remove('playing');
const icon = btn.querySelector('i');
if (icon) icon.className = 'fas fa-play';
});
playBtn.classList.add('playing');
const icon = playBtn.querySelector('i');
if (icon) icon.className = 'fas fa-pause';
// Play track
if (typeof window.playTrack === 'function') {
console.log('🎵 Using window.playTrack');
window.playTrack(audioUrl, title, artist);
} else if (typeof playLocalTrack === 'function') {
console.log('🎵 Using playLocalTrack');
playLocalTrack(audioUrl, title, artist);
} else {
console.error('❌ No playTrack function available');
}
} else {
console.error('❌ Invalid audio URL:', audioUrl);
}
return;
}
// Handle follow button clicks using event delegation
const followBtn = e.target.closest('.feed-follow-btn');
if (followBtn && followBtn.tagName === 'BUTTON') {
e.preventDefault();
e.stopPropagation();
const creatorCard = followBtn.closest('.feed-creator-card');
const creatorId = creatorCard?.getAttribute('data-creator-id');
if (creatorId && typeof window.toggleFollow === 'function') {
window.toggleFollow(creatorId, followBtn);
} else if (creatorId) {
// Fallback: make API call directly
fetch('/api_social.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
action: 'follow',
user_id: creatorId
})
})
.then(response => response.json())
.then(data => {
if (data.success) {
if (data.action === 'followed') {
followBtn.textContent = feedTranslations.following;
followBtn.classList.add('following');
} else {
followBtn.textContent = feedTranslations.follow;
followBtn.classList.remove('following');
}
}
})
.catch(error => console.error('Follow error:', error));
}
}
});
// Initialize dropdown filters
const timeFilter = document.getElementById('feedTimeFilter');
const scopeFilter = document.getElementById('feedScopeFilter');
if (timeFilter && scopeFilter) {
let currentTime = timeFilter.value;
let currentScope = scopeFilter.value;
// Handle filter changes
function handleFilterChange() {
const newTime = timeFilter.value;
const newScope = scopeFilter.value;
if (newTime !== currentTime || newScope !== currentScope) {
currentTime = newTime;
currentScope = newScope;
loadFeedData(currentTime, currentScope);
}
}
timeFilter.addEventListener('change', handleFilterChange);
scopeFilter.addEventListener('change', handleFilterChange);
}
});
// Toggle track like function (matching artist_profile pattern)
function toggleTrackLike(trackId, button) {
if (!trackId || !button) return;
const isLoggedIn = <?= isset($_SESSION['user_id']) ? 'true' : 'false' ?>;
if (!isLoggedIn) {
window.location.href = '/auth/login.php';
return;
}
button.classList.add('loading');
button.disabled = true;
fetch('/api/toggle_like.php', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
credentials: 'include',
body: JSON.stringify({ track_id: trackId })
})
.then(response => {
// Log response for debugging
console.log('Like API response status:', response.status, response.statusText);
// Check if response is OK
if (!response.ok) {
// Try to get error message from response
return response.text().then(text => {
console.error('Like API error response:', text);
let errorData;
try {
errorData = JSON.parse(text);
} catch (e) {
errorData = { success: false, error: text || 'Request failed' };
}
throw new Error(errorData.error || `HTTP ${response.status}: ${response.statusText}`);
});
}
// Parse JSON response
return response.json().catch(err => {
console.error('JSON parse error:', err);
throw new Error('Invalid response from server');
});
})
.then(data => {
console.log('Like API success:', data);
try {
if (data && data.success) {
// Update button state
if (data.liked) {
button.classList.add('liked');
} else {
button.classList.remove('liked');
}
// Update like count
const countSpan = button.querySelector('.like-count');
if (countSpan && typeof formatNumberK === 'function') {
countSpan.textContent = formatNumberK(data.like_count || 0);
} else if (countSpan) {
countSpan.textContent = (data.like_count || 0).toString();
}
// Show success notification only when liking (not unliking)
if (data.liked && typeof showNotification === 'function') {
showNotification('<?= t('feed.liked') ?? 'Liked!' ?>', 'success');
}
} else {
console.error('Like failed:', data?.error || 'Unknown error');
if (typeof showNotification === 'function') {
showNotification(data?.error || '<?= t('feed.like_error') ?? 'Failed to like' ?>', 'error');
}
}
} catch (uiError) {
console.error('Error updating UI after like:', uiError);
// Even if UI update fails, the like was successful, so don't show error
}
})
.catch(error => {
console.error('Like error details:', {
message: error.message,
stack: error.stack,
name: error.name
});
// Show more specific error message
let errorMessage = '<?= t('feed.network_error') ?? 'Network error - please try again' ?>';
if (error.message) {
if (error.message.includes('HTTP')) {
errorMessage = error.message;
} else if (error.message.includes('Failed to fetch') || error.message.includes('NetworkError')) {
errorMessage = '<?= t('feed.network_error') ?? 'Network error - please check your connection' ?>';
} else if (error.message.includes('Invalid response')) {
errorMessage = 'Server error - please try again';
}
}
if (typeof showNotification === 'function') {
showNotification(errorMessage, 'error');
}
})
.finally(() => {
button.classList.remove('loading');
button.disabled = false;
});
}
// Show comments - redirect to track page with comments anchor
function showComments(trackId) {
window.location.href = `/track.php?id=${trackId}#comments`;
}
// Update credits display
function updateCreditsDisplay() {
// Get current credits from the display
const creditsText = document.querySelector('.credits-info');
if (creditsText) {
const currentCredits = parseInt(creditsText.textContent.match(/You have (\d+) credits/)?.[1] || 0);
const newCredits = Math.max(0, currentCredits - 1);
// Update the display
const warningHtml = newCredits <= 2 ? '<span class="credit-warning">⚠️ Low credits!</span>' : '';
creditsText.innerHTML = `<i class="fas fa-coins"></i> Cost: <span id="creditCost">1</span> Credit (You have ${newCredits} credits) ${warningHtml}`;
// Update CSS class for low credits
if (newCredits <= 2) {
creditsText.classList.add('low-credits');
} else {
creditsText.classList.remove('low-credits');
}
// Also update any other credit displays on the page
const allCreditDisplays = document.querySelectorAll('[data-credits-display]');
allCreditDisplays.forEach(display => {
display.textContent = newCredits;
});
// Only update credits if user is logged in and we don't have current credits
if (typeof window.currentUserCredits === 'undefined') {
fetch('/update_credits.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ action: 'get_current_credits' })
})
.then(response => response.json())
.then(data => {
if (data.credits !== undefined) {
// Update with actual server value (no caching)
creditsText.innerHTML = `<i class="fas fa-coins"></i> Cost: <span id="creditCost">1</span> Credit (You have ${data.credits} credits)`;
}
})
.catch(error => {
console.log('Could not update credits from server:', error);
});
} else {
// Always get fresh credits from server
updateCreditsFromServer();
}
}
}
// Show credit refill prompt
function showCreditRefillPrompt(result) {
// Hide loading
createBtn.disabled = false;
loading.style.display = 'none';
// Create modal overlay with animations
const modal = document.createElement('div');
modal.className = 'credit-refill-modal';
modal.innerHTML = `
<div class="credit-refill-content">
<div class="credit-refill-header">
<div class="credit-icon-container">
<i class="fas fa-coins credit-icon"></i>
<div class="coin-particles"></div>
</div>
<h3 class="animated-title">Out of Credits!</h3>
<div class="pulse-ring"></div>
</div>
<div class="credit-refill-body">
<p class="animated-text">${result.message || 'You have no credits remaining. Please refill your credits to continue creating music.'}</p>
<div class="credit-status">
<div class="credit-counter">
<span class="counter-label">Credits Remaining</span>
<span class="counter-value" data-target="${result.credits_remaining || 0}">0</span>
</div>
<div class="credit-counter">
<span class="counter-label">Credits Needed</span>
<span class="counter-value" data-target="${result.credits_needed || 1}">0</span>
</div>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 0%"></div>
</div>
</div>
<div class="credit-refill-actions">
<button class="btn btn-primary refill-btn animated-btn" onclick="window.location.href='${result.refill_options?.url || '/credits.php'}';">
<i class="fas fa-plus"></i>
<span>${result.refill_options?.text || 'Refill Credits'}</span>
<div class="btn-particles"></div>
</button>
<button class="btn btn-secondary cancel-btn" onclick="closeCreditRefillModal()">
<i class="fas fa-times"></i>
<span>Cancel</span>
</button>
</div>
</div>
`;
document.body.appendChild(modal);
// Animate counters
setTimeout(() => {
const counters = modal.querySelectorAll('.counter-value');
counters.forEach(counter => {
const target = parseInt(counter.getAttribute('data-target'));
const duration = 1000;
const increment = target / (duration / 16);
let current = 0;
const updateCounter = () => {
current += increment;
if (current < target) {
counter.textContent = Math.floor(current);
requestAnimationFrame(updateCounter);
} else {
counter.textContent = target;
}
};
updateCounter();
});
}, 600);
// Add styles if not already present
if (!document.getElementById('credit-refill-styles')) {
const styles = document.createElement('style');
styles.id = 'credit-refill-styles';
styles.textContent = `
.credit-refill-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
backdrop-filter: blur(20px);
animation: modalFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes modalFadeIn {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
.credit-refill-content {
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
border: 2px solid;
border-image: linear-gradient(135deg, #667eea, #764ba2) 1;
border-radius: 24px;
padding: 3.5rem;
max-width: 550px;
width: 90%;
text-align: center;
box-shadow: 0 25px 80px rgba(102, 126, 234, 0.3);
backdrop-filter: blur(30px);
animation: contentSlideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
@keyframes contentSlideIn {
from {
opacity: 0;
transform: translateY(50px) scale(0.9);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.credit-refill-content::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;
pointer-events: none;
}
.credit-refill-header {
margin-bottom: 2.5rem;
position: relative;
z-index: 2;
}
.credit-icon-container {
position: relative;
display: inline-block;
margin-bottom: 1.5rem;
}
.credit-icon {
font-size: 5rem;
color: #667eea;
background: linear-gradient(135deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: iconFloat 3s ease-in-out infinite;
position: relative;
z-index: 2;
}
@keyframes iconFloat {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-10px) rotate(5deg); }
}
.coin-particles {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
pointer-events: none;
}
.coin-particles::before,
.coin-particles::after {
content: '🪙';
position: absolute;
font-size: 1.5rem;
animation: particleFloat 4s ease-in-out infinite;
}
.coin-particles::before {
top: -20px;
left: -20px;
animation-delay: 0s;
}
.coin-particles::after {
bottom: -20px;
right: -20px;
animation-delay: 2s;
}
@keyframes particleFloat {
0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.7; }
50% { transform: translateY(-15px) rotate(180deg); opacity: 1; }
}
.pulse-ring {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120px;
height: 120px;
border: 3px solid rgba(102, 126, 234, 0.3);
border-radius: 50%;
animation: pulseRing 2s ease-out infinite;
pointer-events: none;
}
@keyframes pulseRing {
0% {
transform: translate(-50%, -50%) scale(0.8);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(1.5);
opacity: 0;
}
}
.animated-title {
color: white;
font-size: 2.8rem;
font-weight: 800;
margin: 0;
background: linear-gradient(135deg, #ffffff, #667eea);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: titleGlow 2s ease-in-out infinite alternate;
}
@keyframes titleGlow {
from { filter: drop-shadow(0 0 10px rgba(102, 126, 234, 0.5)); }
to { filter: drop-shadow(0 0 20px rgba(102, 126, 234, 0.8)); }
}
.credit-refill-body {
margin-bottom: 2.5rem;
position: relative;
z-index: 2;
}
.animated-text {
color: #a0aec0;
font-size: 1.7rem;
line-height: 1.6;
margin-bottom: 2rem;
animation: textFadeIn 1s ease-out 0.3s both;
}
@keyframes textFadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.credit-status {
display: flex;
justify-content: space-between;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
border: 1px solid rgba(102, 126, 234, 0.3);
border-radius: 16px;
padding: 2rem;
margin: 1.5rem 0;
animation: statusSlideIn 0.8s ease-out 0.5s both;
}
@keyframes statusSlideIn {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.credit-counter {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.counter-label {
color: #a0aec0;
font-size: 1.3rem;
font-weight: 500;
}
.counter-value {
color: #667eea;
font-size: 2.4rem;
font-weight: 900;
animation: counterPulse 0.5s ease-out;
}
@keyframes counterPulse {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
.progress-bar {
width: 100%;
height: 8px;
background: rgba(102, 126, 234, 0.2);
border-radius: 4px;
overflow: hidden;
margin-top: 1.5rem;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #667eea, #764ba2);
border-radius: 4px;
transition: width 1s ease-out;
animation: progressFill 1.5s ease-out 0.8s both;
}
@keyframes progressFill {
from { width: 0%; }
to { width: 100%; }
}
.credit-refill-actions {
display: flex;
gap: 1.5rem;
justify-content: center;
position: relative;
z-index: 2;
animation: actionsFadeIn 1s ease-out 1s both;
}
@keyframes actionsFadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.refill-btn {
background: linear-gradient(135deg, #667eea, #764ba2);
border: none;
color: white;
padding: 1.5rem 3rem;
border-radius: 16px;
font-size: 1.7rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 1rem;
position: relative;
overflow: hidden;
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}
.refill-btn:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 15px 40px rgba(102, 126, 234, 0.5);
}
.refill-btn:active {
transform: translateY(-1px) scale(1.02);
}
.btn-particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.btn-particles::before,
.btn-particles::after {
content: '';
position: absolute;
width: 4px;
height: 4px;
background: rgba(255, 255, 255, 0.8);
border-radius: 50%;
animation: btnParticle 2s ease-in-out infinite;
}
.btn-particles::before {
top: 20%;
left: 20%;
animation-delay: 0s;
}
.btn-particles::after {
bottom: 20%;
right: 20%;
animation-delay: 1s;
}
@keyframes btnParticle {
0%, 100% { transform: scale(0) rotate(0deg); opacity: 0; }
50% { transform: scale(1) rotate(180deg); opacity: 1; }
}
.cancel-btn {
background: rgba(160, 174, 192, 0.2);
border: 1px solid rgba(160, 174, 192, 0.3);
color: #a0aec0;
padding: 1.5rem 3rem;
border-radius: 16px;
font-size: 1.7rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 1rem;
}
.cancel-btn:hover {
background: rgba(160, 174, 192, 0.3);
color: white;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(160, 174, 192, 0.3);
}
@media (max-width: 768px) {
.credit-refill-content {
padding: 2.5rem 2rem;
margin: 1rem;
}
.credit-refill-actions {
flex-direction: column;
}
.credit-status {
flex-direction: column;
gap: 1.5rem;
}
.animated-title {
font-size: 2.4rem;
}
.credit-icon {
font-size: 4rem;
}
}
`;
document.head.appendChild(styles);
}
}
// Close credit refill modal
function closeCreditRefillModal() {
const modal = document.querySelector('.credit-refill-modal');
if (modal) {
modal.remove();
}
}
// Generic animated modal for all types of prompts
function showAnimatedModal(config) {
const modal = document.createElement('div');
modal.className = 'animated-modal';
const iconClass = config.icon || 'fas fa-info-circle';
const modalType = config.type || 'info';
const title = config.title || 'Information';
const message = config.message || '';
let actionsHtml = '';
if (config.actions && config.actions.length > 0) {
actionsHtml = config.actions.map(action => {
const btnClass = action.type === 'primary' ? 'btn-primary' : 'btn-secondary';
const actionAttr = action.action === 'close' ? 'onclick="closeAnimatedModal()"' : '';
return `<button class="btn ${btnClass} modal-btn" ${actionAttr}>${action.text}</button>`;
}).join('');
}
modal.innerHTML = `
<div class="animated-modal-content ${modalType}-modal">
<div class="modal-header">
<div class="modal-icon-container">
<i class="${iconClass} modal-icon"></i>
<div class="icon-particles"></div>
</div>
<h3 class="modal-title">${title}</h3>
<div class="pulse-ring"></div>
</div>
<div class="modal-body">
<p class="modal-message">${message}</p>
</div>
<div class="modal-actions">
${actionsHtml}
</div>
</div>
`;
document.body.appendChild(modal);
// Add styles if not already present
if (!document.getElementById('animated-modal-styles')) {
const styles = document.createElement('style');
styles.id = 'animated-modal-styles';
styles.textContent = `
.animated-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
backdrop-filter: blur(20px);
animation: modalFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.animated-modal-content {
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
border: 2px solid;
border-radius: 24px;
padding: 3.5rem;
max-width: 500px;
width: 90%;
text-align: center;
box-shadow: 0 25px 80px rgba(102, 126, 234, 0.3);
backdrop-filter: blur(30px);
animation: contentSlideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.error-modal {
border-image: linear-gradient(135deg, #e53e3e, #c53030) 1;
box-shadow: 0 25px 80px rgba(229, 62, 62, 0.3);
}
.warning-modal {
border-image: linear-gradient(135deg, #d69e2e, #b7791f) 1;
box-shadow: 0 25px 80px rgba(214, 158, 46, 0.3);
}
.info-modal {
border-image: linear-gradient(135deg, #3182ce, #2c5aa0) 1;
box-shadow: 0 25px 80px rgba(49, 130, 206, 0.3);
}
.success-modal {
border-image: linear-gradient(135deg, #38a169, #2f855a) 1;
box-shadow: 0 25px 80px rgba(56, 161, 105, 0.3);
}
.modal-header {
margin-bottom: 2rem;
position: relative;
}
.modal-icon-container {
position: relative;
display: inline-block;
margin-bottom: 1.5rem;
}
.modal-icon {
font-size: 4rem;
animation: iconFloat 3s ease-in-out infinite;
position: relative;
z-index: 2;
}
.error-modal .modal-icon {
color: #e53e3e;
background: linear-gradient(135deg, #e53e3e, #c53030);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.warning-modal .modal-icon {
color: #d69e2e;
background: linear-gradient(135deg, #d69e2e, #b7791f);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.info-modal .modal-icon {
color: #3182ce;
background: linear-gradient(135deg, #3182ce, #2c5aa0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.success-modal .modal-icon {
color: #38a169;
background: linear-gradient(135deg, #38a169, #2f855a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.modal-title {
color: white;
font-size: 2.4rem;
font-weight: 800;
margin: 0;
animation: titleGlow 2s ease-in-out infinite alternate;
}
.modal-message {
color: #a0aec0;
font-size: 1.6rem;
line-height: 1.6;
margin-bottom: 2rem;
animation: textFadeIn 1s ease-out 0.3s both;
}
.modal-actions {
display: flex;
gap: 1.5rem;
justify-content: center;
animation: actionsFadeIn 1s ease-out 1s both;
}
.modal-btn {
padding: 1.2rem 2.5rem;
border-radius: 12px;
font-size: 1.5rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
border: none;
display: flex;
align-items: center;
gap: 0.8rem;
}
.modal-btn.btn-primary {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}
.modal-btn.btn-primary:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 15px 40px rgba(102, 126, 234, 0.5);
}
.modal-btn.btn-secondary {
background: rgba(160, 174, 192, 0.2);
border: 1px solid rgba(160, 174, 192, 0.3);
color: #a0aec0;
}
.modal-btn.btn-secondary:hover {
background: rgba(160, 174, 192, 0.3);
color: white;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(160, 174, 192, 0.3);
}
@media (max-width: 768px) {
.animated-modal-content {
padding: 2.5rem 2rem;
margin: 1rem;
}
.modal-actions {
flex-direction: column;
}
.modal-title {
font-size: 2rem;
}
.modal-icon {
font-size: 3rem;
}
}
`;
document.head.appendChild(styles);
}
}
// Close animated modal
function closeAnimatedModal() {
const modal = document.querySelector('.animated-modal');
if (modal) {
modal.remove();
}
}
</script>
<style>
.music-player {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
border-top: 2px solid;
border-image: linear-gradient(90deg, #667eea, #764ba2, #667eea) 1;
backdrop-filter: blur(25px);
z-index: 9999 !important;
padding: 0.8rem 1.5rem;
box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.6);
overflow: hidden;
width: 100vw !important;
height: auto !important;
min-height: 70px;
}
.music-player::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;
pointer-events: none;
}
.player-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.8rem;
position: relative;
z-index: 2;
}
.player-info {
display: flex;
flex-direction: column;
gap: 0.2rem;
flex: 1;
margin-right: 1.5rem;
}
.player-info span:first-child {
color: white;
font-weight: 600;
font-size: 1.3rem;
background: linear-gradient(135deg, #ffffff, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.player-info span:last-child {
color: #a0aec0;
font-size: 1.1rem;
font-weight: 500;
}
.player-controls {
display: flex;
gap: 0.8rem;
align-items: center;
flex-shrink: 0;
}
.control-btn {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
border: 1px solid rgba(102, 126, 234, 0.3);
color: white;
padding: 0.6rem 0.8rem;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 1.2rem;
backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}
.control-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.control-btn:hover::before {
left: 100%;
}
.control-btn:hover {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.4), rgba(118, 75, 162, 0.4));
border-color: rgba(102, 126, 234, 0.6);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.control-btn:active {
transform: translateY(0px);
}
.player-body {
display: flex;
align-items: center;
gap: 1.5rem;
position: relative;
z-index: 2;
}
.progress-container {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.progress-bar {
width: 100%;
height: 6px;
background: rgba(255, 255, 255, 0.08);
border-radius: 3px;
overflow: hidden;
cursor: pointer;
border: 1px solid rgba(102, 126, 234, 0.2);
position: relative;
}
.progress-bar::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
animation: shimmer 2s ease-in-out infinite;
}
@keyframes shimmer {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.6; }
}
.progress-fill {
height: 100%;
background: linear-gradient(135deg, #667eea, #764ba2);
width: 0%;
transition: width 0.1s ease;
position: relative;
z-index: 2;
box-shadow: 0 0 10px rgba(102, 126, 234, 0.5);
}
.progress-fill::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
animation: progressShimmer 1.5s ease-in-out infinite;
}
@keyframes progressShimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.time-display {
display: flex;
justify-content: space-between;
font-size: 1.1rem;
color: #a0aec0;
font-weight: 500;
}
.volume-container {
display: flex;
align-items: center;
gap: 0.8rem;
color: #a0aec0;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
padding: 0.6rem 1rem;
border-radius: 8px;
border: 1px solid rgba(102, 126, 234, 0.2);
backdrop-filter: blur(10px);
}
.volume-container i {
font-size: 1.2rem;
color: #667eea;
}
.volume-container input[type="range"] {
width: 80px;
height: 4px;
background: rgba(255, 255, 255, 0.1);
border-radius: 2px;
outline: none;
cursor: pointer;
border: 1px solid rgba(102, 126, 234, 0.3);
}
.volume-container input[type="range"]::-webkit-slider-thumb {
appearance: none;
width: 14px;
height: 14px;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 50%;
cursor: pointer;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 1px 4px rgba(102, 126, 234, 0.4);
transition: all 0.3s ease;
}
.volume-container input[type="range"]::-webkit-slider-thumb:hover {
transform: scale(1.1);
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.6);
}
.volume-container input[type="range"]::-moz-range-thumb {
width: 14px;
height: 14px;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 50%;
cursor: pointer;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 1px 4px rgba(102, 126, 234, 0.4);
transition: all 0.3s ease;
}
/* Enhanced Playlist Panel - Matching Homepage Theme */
.playlist-panel {
position: fixed;
bottom: 120px;
right: 2rem;
width: 450px;
max-height: 600px;
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
border: 2px solid;
border-image: linear-gradient(135deg, #667eea, #764ba2) 1;
border-radius: 20px;
backdrop-filter: blur(25px);
z-index: 1001;
display: none;
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.7);
position: relative;
overflow: hidden;
}
.playlist-panel::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.2;
pointer-events: none;
}
.playlist-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem 2.5rem;
border-bottom: 1px solid rgba(102, 126, 234, 0.2);
position: relative;
z-index: 2;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
}
.playlist-header h3 {
color: white;
font-size: 2rem;
font-weight: 700;
background: linear-gradient(135deg, #ffffff, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.close-btn {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
border: 2px solid rgba(102, 126, 234, 0.3);
color: white;
font-size: 1.6rem;
cursor: pointer;
padding: 0.8rem;
border-radius: 12px;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.close-btn:hover {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.4), rgba(118, 75, 162, 0.4));
border-color: rgba(102, 126, 234, 0.6);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}
.playlist-content {
max-height: 450px;
overflow-y: auto;
padding: 1.5rem;
position: relative;
z-index: 2;
}
.playlist-content::-webkit-scrollbar {
width: 6px;
}
.playlist-content::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
border-radius: 3px;
}
.playlist-content::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 3px;
}
.playlist-item {
display: flex;
align-items: center;
gap: 1.2rem;
padding: 1.2rem 1.5rem;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
margin-bottom: 0.8rem;
border: 1px solid transparent;
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(10px);
}
.playlist-item:hover {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
border-color: rgba(102, 126, 234, 0.3);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
}
.playlist-item.active {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
border: 2px solid rgba(102, 126, 234, 0.5);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}
.playlist-item-info {
flex: 1;
}
.playlist-item-title {
color: white;
font-weight: 600;
font-size: 1.5rem;
margin-bottom: 0.3rem;
background: linear-gradient(135deg, #ffffff, #667eea);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.playlist-item-artist {
color: #a0aec0;
font-size: 1.3rem;
font-weight: 500;
}
.playlist-item-duration {
color: #667eea;
font-size: 1.2rem;
font-weight: 600;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
padding: 0.3rem 0.8rem;
border-radius: 8px;
border: 1px solid rgba(102, 126, 234, 0.3);
}
/* Responsive */
@media (max-width: 768px) {
.music-player {
padding: 1rem;
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100vw !important;
z-index: 9999 !important;
}
.player-header {
flex-direction: column;
gap: 1rem;
align-items: flex-start;
}
.player-body {
flex-direction: column;
gap: 1rem;
}
.playlist-panel {
width: calc(100vw - 2rem);
right: 1rem;
left: 1rem;
}
body {
padding-bottom: 140px; /* More space on mobile */
}
}
/* Global player is handled by global_player.php */
</style>
</div>
</div>
<!-- Story Hint Section -->
<section style="background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(240, 147, 251, 0.05) 100%); padding: 4rem 0; text-align: center; color: #cccccc;">
<div class="container">
<p style="font-size: 1.2rem; line-height: 1.6; max-width: 600px; margin: 0 auto;">
"<?= t('home.story_text') ?>
<a href="/about.php" style="color: #667eea; text-decoration: none; font-weight: 600;"><?= t('home.discover_story') ?></a> <?= t('home.story_join') ?>"
</p>
</div>
</section>
<script>
// Homepage functionality using global player
// Removed duplicate/conflicting initialization - handled by earlier script section
// This prevents interference with currently playing music during AJAX navigation
// Play track function for any audio elements on homepage
async function playTrack(audioUrl, title, artist) {
console.log('🎵 Homepage playTrack called:', { audioUrl, title, artist });
// Ensure audio URL is absolute if it's relative
let finalAudioUrl = audioUrl;
if (audioUrl && !audioUrl.startsWith('http') && !audioUrl.startsWith('//')) {
if (audioUrl.startsWith('/')) {
finalAudioUrl = window.location.origin + audioUrl;
} else {
finalAudioUrl = window.location.origin + '/' + audioUrl;
}
console.log('🎵 Converted relative URL to absolute:', finalAudioUrl);
}
if (!finalAudioUrl || finalAudioUrl.trim() === '') {
console.error('❌ Audio URL is empty!');
return;
}
// Use the enhanced global player function - check if ready, if not wait briefly
try {
if (typeof window.enhancedGlobalPlayer !== 'undefined' && typeof window.enhancedGlobalPlayer.playTrack === 'function') {
const success = window.enhancedGlobalPlayer.playTrack(finalAudioUrl, title, artist);
if (success) {
console.log('🎵 Enhanced Global player playTrack call successful');
} else {
console.error('❌ Global player returned false');
alert(`Failed to play: ${title} by ${artist}. Please try again.`);
}
} else {
// Player not ready yet - wait a moment and try once more
console.warn('🎵 Global player not ready, waiting 500ms...');
setTimeout(() => {
if (typeof window.enhancedGlobalPlayer !== 'undefined' && typeof window.enhancedGlobalPlayer.playTrack === 'function') {
const success = window.enhancedGlobalPlayer.playTrack(finalAudioUrl, title, artist);
if (!success) {
alert(`Failed to play: ${title} by ${artist}. Please try again.`);
}
} else {
alert(`Audio player not ready. Please refresh the page.`);
}
}, 500);
}
} catch (error) {
console.error('🎵 Enhanced Global player failed:', error);
alert(`Failed to play: ${title} by ${artist}. Please try again.`);
}
}
</script>
<!-- Popular Genres Modal - New Compact Design -->
<div id="genresModal" class="genres-modal-new" style="display: none;">
<div class="genres-modal-backdrop-new" onclick="closeGenresModal()"></div>
<div class="genres-modal-content-new" id="genresModalContent">
<div class="genres-modal-drag-handle"></div>
<div class="genres-modal-header-new">
<h3>🎵 <?= t('genres.modal.title') ?></h3>
<button class="genres-close-btn-new" onclick="closeGenresModal()" aria-label="Close">×</button>
</div>
<div class="genres-chips-container" id="genresGrid">
<div class="genres-loading-new"><?= t('genres.modal.loading') ?></div>
</div>
</div>
</div>
<style>
/* New Compact Genres Modal - Mobile First */
.genres-modal-new {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100000;
display: flex;
align-items: center;
justify-content: flex-start;
animation: genresFadeInNew 0.25s ease;
}
.genres-modal-backdrop-new {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(4px);
z-index: 1;
}
.genres-modal-content-new {
position: relative;
width: 85%;
max-width: 400px;
max-height: 90vh;
background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
border-radius: 0 20px 20px 0;
padding: 1rem 1rem 1.5rem 1rem;
box-shadow: 8px 0 32px rgba(0, 0, 0, 0.5);
overflow-y: auto;
animation: genresSlideInLeft 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
z-index: 2;
touch-action: pan-y;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
transform: translateX(0);
opacity: 1;
}
.genres-modal-content-new.dragging {
transition: none;
overflow-y: hidden;
}
.genres-modal-drag-handle {
width: 50px;
height: 5px;
background: rgba(255, 255, 255, 0.4);
border-radius: 3px;
margin: 0.5rem auto 0.75rem auto;
cursor: grab;
touch-action: none;
-webkit-tap-highlight-color: transparent;
user-select: none;
transition: background 0.2s ease;
}
.genres-modal-drag-handle:active {
cursor: grabbing;
background: rgba(255, 255, 255, 0.6);
}
@media (max-width: 768px) {
.genres-modal-new {
z-index: 100000;
align-items: center;
justify-content: flex-start;
}
.genres-modal-content-new {
width: 80%;
max-width: 350px;
max-height: 90vh;
border-radius: 0 20px 20px 0;
margin-left: 0;
}
.genres-modal-drag-handle {
width: 60px;
height: 6px;
margin: 0.75rem auto 1rem auto;
}
.genres-modal-content-new.dragging {
touch-action: none;
}
}
.genres-modal-header-new {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid rgba(102, 126, 234, 0.2);
}
.genres-modal-header-new h3 {
color: #fff;
font-size: 1.25rem;
font-weight: 600;
margin: 0;
flex: 1;
}
.genres-close-btn-new {
width: 36px;
height: 36px;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 8px;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: bold;
line-height: 1;
transition: all 0.2s ease;
flex-shrink: 0;
}
.genres-close-btn-new:active {
background: rgba(255, 255, 255, 0.25);
transform: scale(0.95);
}
.genres-chips-container {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: flex-start;
}
.genres-loading-new {
width: 100%;
text-align: center;
color: #a0aec0;
padding: 1.5rem;
font-size: 0.9rem;
}
.genre-chip {
display: inline-flex;
align-items: center;
padding: 0.5rem 0.875rem;
background: rgba(102, 126, 234, 0.12);
border: 1px solid rgba(102, 126, 234, 0.3);
border-radius: 20px;
color: #fff;
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.genre-chip:active {
background: rgba(102, 126, 234, 0.25);
border-color: rgba(102, 126, 234, 0.5);
transform: scale(0.96);
}
@keyframes genresFadeInNew {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes genresSlideInLeft {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes genresSlideUpNew {
from {
transform: translateY(30px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* Desktop adjustments */
@media (min-width: 769px) {
.genres-modal-new {
align-items: center;
justify-content: center;
}
.genres-modal-content-new {
width: 90%;
max-width: 500px;
max-height: 70vh;
border-radius: 20px;
padding: 1.5rem;
animation: genresSlideUpNew 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
transform: translateY(0);
}
.genres-modal-header-new h3 {
font-size: 1.5rem;
}
.genres-close-btn-new {
width: 40px;
height: 40px;
font-size: 1.75rem;
}
.genres-close-btn-new:hover {
background: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.4);
}
.genre-chip {
padding: 0.6rem 1rem;
font-size: 0.9rem;
}
.genre-chip:hover {
background: rgba(102, 126, 234, 0.2);
border-color: rgba(102, 126, 234, 0.4);
transform: translateY(-2px);
}
}
@media (max-width: 480px) {
.genres-modal-content-new {
max-height: 80vh;
padding: 0.875rem 0.875rem 1.25rem 0.875rem;
}
.genres-modal-header-new {
margin-bottom: 0.875rem;
padding-bottom: 0.625rem;
}
.genres-modal-header-new h3 {
font-size: 1.1rem;
}
.genres-close-btn-new {
width: 40px;
height: 40px;
font-size: 1.75rem;
}
.genres-chips-container {
gap: 0.4rem;
}
.genre-chip {
padding: 0.45rem 0.75rem;
font-size: 0.8rem;
border-radius: 18px;
}
}
</style>
<script>
let genresModalTimer = null;
let genresModalShown = false;
let isDragging = false;
let dragStartY = 0;
let currentY = 0;
let modalContent = null;
function showGenresModal() {
if (genresModalShown) return;
const modal = document.getElementById('genresModal');
if (!modal) return;
modal.style.display = 'flex';
document.body.style.overflow = 'hidden';
genresModalShown = true;
// Reset modal position
modalContent = document.getElementById('genresModalContent');
if (modalContent) {
modalContent.style.transform = 'translateX(0)';
modalContent.style.opacity = '1';
modalContent.classList.remove('dragging');
}
loadPopularGenres();
initModalDrag();
}
function closeGenresModal() {
const modal = document.getElementById('genresModal');
if (modal) {
modal.style.display = 'none';
document.body.style.overflow = '';
}
// Reset drag state
isDragging = false;
if (modalContent) {
modalContent.classList.remove('dragging');
modalContent.style.transform = 'translateY(0)';
}
// Remember dismissal based on frequency setting
if (genresModalConfig.frequency === 'once_per_day') {
localStorage.setItem('genresModalDismissed', Date.now().toString());
} else if (genresModalConfig.frequency === 'once_per_session') {
// For session-based, we use sessionStorage which clears on browser close
sessionStorage.setItem('genresModalDismissed', Date.now().toString());
} else if (genresModalConfig.frequency === 'every_page_load') {
// For every page load, we still remember for this session to avoid showing multiple times
sessionStorage.setItem('genresModalDismissed', Date.now().toString());
}
}
function initModalDrag() {
if (!modalContent) {
modalContent = document.getElementById('genresModalContent');
}
if (!modalContent) return;
const dragHandle = modalContent.querySelector('.genres-modal-drag-handle');
if (!dragHandle) return;
// Touch events for mobile
dragHandle.addEventListener('touchstart', handleDragStart, { passive: false });
document.addEventListener('touchmove', handleDragMove, { passive: false });
document.addEventListener('touchend', handleDragEnd);
// Mouse events for desktop (optional)
dragHandle.addEventListener('mousedown', handleDragStart);
document.addEventListener('mousemove', handleDragMove);
document.addEventListener('mouseup', handleDragEnd);
// Also allow dragging from header area on mobile
const header = modalContent.querySelector('.genres-modal-header-new');
if (header) {
header.addEventListener('touchstart', handleDragStart, { passive: false });
header.style.cursor = 'grab';
header.addEventListener('mousedown', handleDragStart);
}
}
function handleDragStart(e) {
if (!modalContent) return;
// Don't start drag if clicking on close button or chips
const target = e.target;
if (target.closest('.genres-close-btn-new') || target.closest('.genre-chip')) {
return;
}
isDragging = true;
modalContent.classList.add('dragging');
const touch = e.touches ? e.touches[0] : e;
// For left-side modal, drag horizontally
dragStartY = touch.clientX; // Using X for horizontal drag
currentY = 0;
// Prevent body scroll while dragging
document.body.style.overflow = 'hidden';
e.preventDefault();
e.stopPropagation();
}
function handleDragMove(e) {
if (!isDragging || !modalContent) return;
const touch = e.touches ? e.touches[0] : e;
const deltaX = touch.clientX - dragStartY; // Horizontal movement
// Only allow leftward dragging (to close)
if (deltaX < 0) {
currentY = Math.abs(deltaX);
modalContent.style.transform = `translateX(${deltaX}px)`;
// Add opacity fade as it's dragged left
const opacity = Math.max(0.3, 1 - (Math.abs(deltaX) / 300));
modalContent.style.opacity = opacity;
}
e.preventDefault();
}
function handleDragEnd(e) {
if (!isDragging || !modalContent) return;
isDragging = false;
modalContent.classList.remove('dragging');
// Restore body scroll
document.body.style.overflow = 'hidden';
// If dragged left more than 100px, close the modal
if (currentY > 100) {
// Animate out before closing
modalContent.style.transition = 'transform 0.3s ease, opacity 0.3s ease';
modalContent.style.transform = 'translateX(-100%)';
modalContent.style.opacity = '0';
setTimeout(() => {
closeGenresModal();
}, 300);
} else {
// Snap back to original position
modalContent.style.transition = 'transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease';
modalContent.style.transform = 'translateX(0)';
modalContent.style.opacity = '1';
}
currentY = 0;
}
async function loadPopularGenres() {
const container = document.getElementById('genresGrid');
if (!container) return;
const translations = {
loading: '<?= addslashes(t('genres.modal.loading')) ?>',
noGenres: '<?= addslashes(t('genres.modal.no_genres')) ?>',
error: '<?= addslashes(t('genres.modal.error')) ?>'
};
container.innerHTML = '<div class="genres-loading-new">' + translations.loading + '</div>';
try {
const response = await fetch('/api/get_popular_genres.php?_t=' + Date.now());
const data = await response.json();
if (data.success && data.genres && data.genres.length > 0) {
container.innerHTML = '';
data.genres.forEach(genre => {
const chip = document.createElement('div');
chip.className = 'genre-chip';
chip.onclick = () => playGenrePlaylist(genre.name);
chip.textContent = escapeHtml(genre.name);
container.appendChild(chip);
});
} else {
container.innerHTML = '<div class="genres-loading-new">' + translations.noGenres + '</div>';
}
} catch (error) {
console.error('Error loading genres:', error);
container.innerHTML = '<div class="genres-loading-new">' + translations.error + '</div>';
}
}
async function playGenrePlaylist(genreName) {
console.log('🎵 Playing genre:', genreName);
closeGenresModal();
// Show player
if (window.enhancedGlobalPlayer && window.enhancedGlobalPlayer.showPlayer) {
window.enhancedGlobalPlayer.showPlayer();
}
try {
const response = await fetch(`/api/get_genre_tracks.php?genre=${encodeURIComponent(genreName)}&per_page=50&_t=${Date.now()}`);
const data = await response.json();
if (data.success && data.tracks && data.tracks.length > 0) {
// Format tracks for playlist (ensure all required fields)
const formattedTracks = data.tracks.map(track => ({
id: track.id,
title: track.title || 'Untitled',
artist_name: track.artist_name || 'Unknown Artist',
audio_url: track.audio_url,
duration: track.duration || 0,
user_id: track.user_id || null,
image_url: track.image_url || null
}));
// Set playlist in global player
if (window.enhancedGlobalPlayer) {
if (window.enhancedGlobalPlayer.setPagePlaylist) {
window.enhancedGlobalPlayer.setPagePlaylist(formattedTracks, 'genre', 0);
} else {
// Fallback: set playlist directly
window.enhancedGlobalPlayer.currentPlaylist = formattedTracks;
window.enhancedGlobalPlayer.currentPlaylistType = 'genre';
window.enhancedGlobalPlayer.currentTrackIndex = 0;
// Enable auto-play for continuous playback
if (typeof window.enhancedGlobalPlayer.autoPlayEnabled !== 'undefined') {
window.enhancedGlobalPlayer.autoPlayEnabled = true;
}
}
// Also store in window for compatibility
window._communityPlaylist = formattedTracks;
window._communityPlaylistType = 'genre';
window._communityTrackIndex = 0;
}
// Play first track
if (formattedTracks.length > 0 && window.playTrack) {
const firstTrack = formattedTracks[0];
window.playTrack(
firstTrack.audio_url,
firstTrack.title,
firstTrack.artist_name,
firstTrack.id,
firstTrack.user_id
);
}
} else {
alert('No tracks found for ' + genreName);
}
} catch (error) {
console.error('Error loading genre playlist:', error);
alert('Error loading playlist');
}
}
function escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
// Genres Modal Settings from Admin
<?php
$genres_modal_enabled = getSiteSetting('genres_modal_enabled', '1') === '1';
$genres_modal_delay = intval(getSiteSetting('genres_modal_delay', '15'));
$genres_modal_frequency = getSiteSetting('genres_modal_frequency', 'once_per_session');
?>
const genresModalConfig = {
enabled: <?= $genres_modal_enabled ? 'true' : 'false' ?>,
delay: <?= $genres_modal_delay ?> * 1000, // Convert to milliseconds
frequency: '<?= addslashes($genres_modal_frequency) ?>'
};
// Show modal based on admin settings
document.addEventListener('DOMContentLoaded', function() {
// Check if modal is enabled
if (!genresModalConfig.enabled || genresModalConfig.frequency === 'never') {
return;
}
// Check frequency settings
let shouldShow = false;
const dismissed = localStorage.getItem('genresModalDismissed');
if (!dismissed) {
// Never shown before
shouldShow = true;
} else {
const dismissedTime = parseInt(dismissed);
const now = Date.now();
switch(genresModalConfig.frequency) {
case 'once_per_session':
// Check sessionStorage instead of localStorage for session-based
const sessionShown = sessionStorage.getItem('genresModalShown');
if (!sessionShown) {
shouldShow = true;
}
break;
case 'once_per_day':
// Check if 24 hours have passed
const hoursSince = (now - dismissedTime) / (1000 * 60 * 60);
if (hoursSince >= 24) {
shouldShow = true;
}
break;
case 'every_page_load':
// Always show (but respect the delay)
shouldShow = true;
break;
default:
shouldShow = false;
}
}
if (!shouldShow) {
return;
}
// Set timer with configured delay
genresModalTimer = setTimeout(() => {
const audioElement = document.getElementById('globalAudioElement');
const isPlaying = audioElement && !audioElement.paused;
if (!isPlaying) {
showGenresModal();
// Mark as shown in session for once_per_session
if (genresModalConfig.frequency === 'once_per_session') {
sessionStorage.setItem('genresModalShown', '1');
}
}
}, genresModalConfig.delay);
});
// Close on Escape key
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
const modal = document.getElementById('genresModal');
if (modal && modal.style.display !== 'none' && modal.style.display !== '') {
closeGenresModal();
}
}
});
</script>
<?php
// Include footer only for full page loads
// Include footer (AJAX navigation removed - always include footer)
include 'includes/footer.php';
include 'includes/advanced_functions_modal.php';
?>