 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/public_html/radio/ |
<?php
session_start();
require_once __DIR__ . '/../config/database.php';
require_once __DIR__ . '/includes/functions.php';
require_once __DIR__ . '/../includes/translations.php';
// Get stats for the page
$pdo = getDBConnection();
$stats = [
'stations' => 0,
'tracks' => 0,
'plays' => 0,
'artists' => 0
];
try {
$stmt = $pdo->query("SELECT COUNT(*) FROM radio_stations WHERE subscription_status = 'active'");
$stats['stations'] = $stmt->fetchColumn() ?: 0;
$stmt = $pdo->query("SELECT COUNT(*) FROM music_tracks WHERE radio_enabled = 1 AND status = 'complete'");
$stats['tracks'] = $stmt->fetchColumn() ?: 0;
$stmt = $pdo->query("SELECT COUNT(*) FROM radio_play_logs");
$stats['plays'] = $stmt->fetchColumn() ?: 0;
$stmt = $pdo->query("SELECT COUNT(DISTINCT user_id) FROM music_tracks WHERE radio_enabled = 1");
$stats['artists'] = $stmt->fetchColumn() ?: 0;
} catch (Exception $e) {
// Use default stats if query fails
}
// Get live stream data for the live player section
$live_stream = null;
$now_playing = null;
$listener_count = 0;
$has_live_stream = false;
try {
// Check if radio_streams table exists
$pdo->query("SELECT 1 FROM radio_streams LIMIT 1");
// Get first active live stream
$stmt = $pdo->prepare("
SELECT rs.id, rs.station_name, rs.call_sign, rs.logo_url,
rstr.id as stream_id, rstr.is_live, rstr.listener_count
FROM radio_stations rs
LEFT JOIN radio_streams rstr ON rs.id = rstr.station_id
WHERE rs.subscription_status = 'active'
AND rs.is_active = 1
AND rstr.is_live = 1
ORDER BY rstr.listener_count DESC, rs.id ASC
LIMIT 1
");
$stmt->execute();
$live_stream = $stmt->fetch();
if ($live_stream && isset($live_stream['stream_id']) && $live_stream['stream_id']) {
$has_live_stream = true;
$listener_count = $live_stream['listener_count'] ?? 0;
// Get current track
$stmt = $pdo->prepare("
SELECT np.*, mt.title, mt.audio_url, mt.image_url, mt.duration,
u.name as artist_name
FROM radio_now_playing np
JOIN music_tracks mt ON np.track_id = mt.id
LEFT JOIN users u ON mt.user_id = u.id
WHERE np.stream_id = ? AND np.ended_at IS NULL
ORDER BY np.started_at DESC
LIMIT 1
");
$stmt->execute([$live_stream['stream_id']]);
$now_playing = $stmt->fetch();
}
} catch (Exception $e) {
// Tables might not exist yet, that's okay
error_log("Live stream query error: " . $e->getMessage());
$live_stream = null;
$now_playing = null;
$has_live_stream = false;
}
require_once __DIR__ . '/../includes/header.php';
$page_title = 'Live Radio - SoundStudioPro Radio';
$page_description = 'Listen to live radio streams, vote for your favorite tracks, and discover new music. Professional radio station platform with real-time streaming.';
$current_page = 'radio';
// SEO meta tags
$og_title = 'Live Radio - SoundStudioPro';
$og_description = 'Listen live, vote for tracks, and discover new music. Professional radio streaming platform.';
$og_image = 'https://' . $_SERVER['HTTP_HOST'] . '/assets/images/og-image.png';
$og_type = 'website';
$og_url = 'https://' . $_SERVER['HTTP_HOST'] . '/radio/';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= htmlspecialchars($page_title) ?></title>
<meta name="description" content="<?= htmlspecialchars($page_description) ?>">
<!-- Open Graph -->
<meta property="og:title" content="<?= htmlspecialchars($og_title) ?>">
<meta property="og:description" content="<?= htmlspecialchars($og_description) ?>">
<meta property="og:image" content="<?= htmlspecialchars($og_image) ?>">
<meta property="og:type" content="<?= htmlspecialchars($og_type) ?>">
<meta property="og:url" content="<?= htmlspecialchars($og_url) ?>">
<link rel="stylesheet" href="/assets/css/main.css">
<style>
/* Enhanced Radio Landing Page Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.radio-landing {
background: #0a0a0a;
color: #ffffff;
min-height: 100vh;
padding-bottom: 4rem;
overflow-x: hidden;
}
/* Animated Background */
.animated-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.gradient-orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.4;
animation: float 20s ease-in-out infinite;
}
.orb-1 {
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(102, 126, 234, 0.4) 0%, transparent 70%);
top: -10%;
left: -10%;
animation-delay: 0s;
}
.orb-2 {
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(118, 75, 162, 0.4) 0%, transparent 70%);
bottom: -10%;
right: -10%;
animation-delay: 7s;
}
.orb-3 {
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(79, 172, 254, 0.3) 0%, transparent 70%);
top: 50%;
left: 50%;
animation-delay: 14s;
}
@keyframes float {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(30px, -30px) scale(1.1); }
66% { transform: translate(-20px, 20px) scale(0.9); }
}
/* Hero Section */
.radio-hero {
position: relative;
padding: 10rem 2rem 8rem;
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 30%, #16213e 70%, #0a0a0a 100%);
text-align: center;
overflow: hidden;
z-index: 1;
}
.radio-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(102, 126, 234, 0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(118, 75, 162, 0.15) 0%, transparent 50%);
pointer-events: none;
animation: pulse 8s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.radio-hero-content {
position: relative;
max-width: 1200px;
margin: 0 auto;
z-index: 2;
animation: fadeInUp 1s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero-badge {
display: inline-block;
padding: 0.5rem 1.5rem;
background: rgba(102, 126, 234, 0.2);
border: 1px solid rgba(102, 126, 234, 0.3);
border-radius: 50px;
font-size: 0.9rem;
color: #a0aec0;
margin-bottom: 2rem;
animation: fadeIn 1s ease-out 0.3s both;
}
.radio-hero h1 {
font-size: 4rem;
font-weight: 800;
margin-bottom: 1.5rem;
line-height: 1.2;
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #4facfe 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: fadeInUp 1s ease-out 0.5s both;
}
.radio-hero .subtitle {
font-size: 1.5rem;
color: #a0aec0;
margin-bottom: 3rem;
max-width: 800px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
animation: fadeInUp 1s ease-out 0.7s both;
}
.radio-hero .cta-buttons {
display: flex;
gap: 1.5rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 2rem;
animation: fadeInUp 1s ease-out 0.9s both;
}
.btn-primary-large {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 1.2rem 3rem;
border: none;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}
.btn-primary-large::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.btn-primary-large:hover::before {
width: 300px;
height: 300px;
}
.btn-primary-large:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
}
.btn-primary-large span {
position: relative;
z-index: 1;
}
.btn-secondary-large {
background: rgba(255, 255, 255, 0.05);
color: white;
padding: 1.2rem 3rem;
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: all 0.3s;
backdrop-filter: blur(10px);
}
.btn-secondary-large:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.4);
transform: translateY(-2px);
}
/* Stats Section */
.radio-stats {
position: relative;
padding: 4rem 2rem;
background: rgba(26, 26, 26, 0.6);
backdrop-filter: blur(20px);
z-index: 1;
}
.stats-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 3rem;
}
.stat-item {
text-align: center;
opacity: 0;
transform: translateY(20px);
transition: all 0.6s ease;
}
.stat-item.visible {
opacity: 1;
transform: translateY(0);
}
.stat-number {
font-size: 3.5rem;
font-weight: 800;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 0.5rem;
line-height: 1;
}
.stat-label {
font-size: 1.1rem;
color: #a0aec0;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Features Section */
.radio-features {
padding: 8rem 2rem;
max-width: 1400px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.section-header {
text-align: center;
margin-bottom: 5rem;
}
.section-badge {
display: inline-block;
padding: 0.5rem 1.5rem;
background: rgba(102, 126, 234, 0.1);
border: 1px solid rgba(102, 126, 234, 0.3);
border-radius: 50px;
font-size: 0.9rem;
color: #667eea;
margin-bottom: 1rem;
}
.section-title {
font-size: 3rem;
font-weight: 800;
margin-bottom: 1rem;
color: #ffffff;
line-height: 1.2;
}
.section-subtitle {
font-size: 1.3rem;
color: #a0aec0;
max-width: 700px;
margin: 0 auto;
line-height: 1.6;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2.5rem;
margin-top: 4rem;
}
.feature-card {
background: rgba(26, 26, 26, 0.8);
padding: 2.5rem;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
opacity: 0;
transform: translateY(30px);
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
transform: scaleX(0);
transition: transform 0.4s;
}
.feature-card:hover::before {
transform: scaleX(1);
}
.feature-card.visible {
opacity: 1;
transform: translateY(0);
}
.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(102, 126, 234, 0.2);
border-color: rgba(102, 126, 234, 0.4);
background: rgba(26, 26, 26, 0.95);
}
.feature-icon {
font-size: 3.5rem;
margin-bottom: 1.5rem;
display: inline-block;
animation: floatIcon 3s ease-in-out infinite;
}
@keyframes floatIcon {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.feature-card h3 {
font-size: 1.8rem;
margin-bottom: 1rem;
color: #ffffff;
font-weight: 700;
}
.feature-card p {
color: #a0aec0;
line-height: 1.8;
font-size: 1.05rem;
}
/* Pricing Section */
.radio-pricing {
padding: 8rem 2rem;
background: linear-gradient(180deg, rgba(26, 26, 26, 0.3) 0%, rgba(26, 26, 26, 0.8) 100%);
position: relative;
z-index: 1;
}
.pricing-container {
max-width: 1400px;
margin: 0 auto;
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2.5rem;
margin-top: 4rem;
}
.pricing-card {
background: rgba(26, 26, 26, 0.9);
padding: 3rem;
border-radius: 24px;
border: 2px solid rgba(255, 255, 255, 0.1);
text-align: center;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
opacity: 0;
transform: translateY(30px);
}
.pricing-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
opacity: 0;
transition: opacity 0.4s;
}
.pricing-card.visible {
opacity: 1;
transform: translateY(0);
}
.pricing-card:hover {
transform: translateY(-15px) scale(1.02);
border-color: rgba(102, 126, 234, 0.5);
box-shadow: 0 25px 70px rgba(102, 126, 234, 0.3);
}
.pricing-card:hover::before {
opacity: 1;
}
.pricing-card.featured {
border-color: #667eea;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
transform: scale(1.05);
}
.pricing-card.featured::after {
content: '';
position: absolute;
top: 20px;
right: -35px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 0.5rem 3rem;
font-size: 0.8rem;
font-weight: 700;
transform: rotate(45deg);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}
.pricing-badge {
position: absolute;
top: 20px;
right: -35px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 0.5rem 3rem;
font-size: 0.8rem;
font-weight: 700;
transform: rotate(45deg);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
z-index: 10;
}
.pricing-card h3 {
font-size: 1.8rem;
margin-bottom: 1rem;
color: #ffffff;
font-weight: 700;
position: relative;
z-index: 1;
}
.pricing-amount {
font-size: 4rem;
font-weight: 800;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 1.5rem 0;
line-height: 1;
position: relative;
z-index: 1;
}
.pricing-period {
color: #a0aec0;
font-size: 1.1rem;
font-weight: 400;
}
.pricing-features {
list-style: none;
padding: 0;
margin: 2.5rem 0;
text-align: left;
position: relative;
z-index: 1;
}
.pricing-features li {
padding: 1rem 0;
color: #a0aec0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
font-size: 1.05rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.pricing-features li:before {
content: '✓';
color: #667eea;
font-weight: bold;
font-size: 1.2rem;
flex-shrink: 0;
}
.pricing-card .btn-primary-large {
width: 100%;
margin-top: 2rem;
position: relative;
z-index: 1;
}
/* API Showcase Section */
.api-showcase {
padding: 8rem 2rem;
background: rgba(26, 26, 26, 0.5);
position: relative;
z-index: 1;
}
.api-showcase-content {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.api-code-block {
background: #1a1a1a;
border: 1px solid rgba(102, 126, 234, 0.3);
border-radius: 16px;
padding: 2rem;
font-family: 'Courier New', monospace;
font-size: 0.9rem;
line-height: 1.8;
overflow-x: auto;
position: relative;
}
.api-code-block::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}
.code-line {
color: #a0aec0;
margin-bottom: 0.5rem;
}
.code-keyword {
color: #667eea;
}
.code-string {
color: #48bb78;
}
.code-comment {
color: #718096;
font-style: italic;
}
/* Testimonials Section */
.radio-testimonials {
padding: 8rem 2rem;
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 4rem;
}
.testimonial-card {
background: rgba(26, 26, 26, 0.8);
padding: 2.5rem;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
opacity: 0;
transform: translateY(30px);
transition: all 0.4s;
}
.testimonial-card.visible {
opacity: 1;
transform: translateY(0);
}
.testimonial-card::before {
content: '"';
position: absolute;
top: 1rem;
left: 1.5rem;
font-size: 4rem;
color: rgba(102, 126, 234, 0.3);
font-family: Georgia, serif;
}
.testimonial-text {
color: #a0aec0;
line-height: 1.8;
margin-bottom: 1.5rem;
font-size: 1.05rem;
position: relative;
z-index: 1;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 1rem;
}
.author-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 700;
}
.author-info h4 {
color: #ffffff;
margin-bottom: 0.25rem;
}
.author-info p {
color: #718096;
font-size: 0.9rem;
}
/* Benefits Section */
.radio-benefits {
padding: 8rem 2rem;
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.benefits-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2.5rem;
margin-top: 4rem;
}
.benefit-item {
display: flex;
align-items: start;
gap: 1.5rem;
padding: 2rem;
background: rgba(26, 26, 26, 0.6);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.05);
transition: all 0.3s;
opacity: 0;
transform: translateX(-20px);
}
.benefit-item.visible {
opacity: 1;
transform: translateX(0);
}
.benefit-item:hover {
border-color: rgba(102, 126, 234, 0.3);
transform: translateX(5px);
}
.benefit-icon {
font-size: 2.5rem;
flex-shrink: 0;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
width: 70px;
height: 70px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.benefit-content h4 {
font-size: 1.3rem;
margin-bottom: 0.75rem;
color: #ffffff;
font-weight: 700;
}
.benefit-content p {
color: #a0aec0;
line-height: 1.7;
}
/* CTA Section */
.radio-cta {
padding: 8rem 2rem;
text-align: center;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
position: relative;
z-index: 1;
overflow: hidden;
}
.radio-cta::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 800px;
height: 800px;
background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
transform: translate(-50%, -50%);
animation: pulse 6s ease-in-out infinite;
}
.radio-cta-content {
max-width: 900px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.radio-cta h2 {
font-size: 3.5rem;
margin-bottom: 1.5rem;
color: #ffffff;
font-weight: 800;
line-height: 1.2;
}
.radio-cta p {
font-size: 1.3rem;
color: #a0aec0;
margin-bottom: 3rem;
line-height: 1.6;
}
/* Responsive */
@media (max-width: 1024px) {
.api-showcase-content {
grid-template-columns: 1fr;
}
.pricing-card.featured {
transform: scale(1);
}
}
@media (max-width: 768px) {
.radio-hero h1 {
font-size: 2.5rem;
}
.radio-hero .subtitle {
font-size: 1.2rem;
}
.section-title {
font-size: 2rem;
}
.features-grid,
.pricing-grid,
.testimonials-grid {
grid-template-columns: 1fr;
}
.stat-number {
font-size: 2.5rem;
}
.radio-cta h2 {
font-size: 2.5rem;
}
.live-radio-section > div > div {
grid-template-columns: 1fr !important;
text-align: center;
}
}
</style>
</head>
<body>
<?php include __DIR__ . '/../includes/header.php'; ?>
<div class="radio-landing">
<!-- Animated Background -->
<div class="animated-bg">
<div class="gradient-orb orb-1"></div>
<div class="gradient-orb orb-2"></div>
<div class="gradient-orb orb-3"></div>
</div>
<!-- Hero Section -->
<section class="radio-hero">
<div class="radio-hero-content">
<div class="hero-badge"><?= t('radio.hero_badge') ?></div>
<h1><?= t('radio.hero_title') ?></h1>
<p class="subtitle">
<?= t('radio.hero_subtitle') ?>
</p>
<div class="cta-buttons">
<a href="/radio/live.php" class="btn-primary-large" style="background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); box-shadow: 0 10px 30px rgba(239, 68, 68, 0.3);">
<span>🔴 <?= $has_live_stream ? 'Listen Live Now' : 'View Live Radio' ?></span>
</a>
<a href="/radio/register.php" class="btn-primary-large">
<span><?= t('radio.cta_start_trial') ?></span>
</a>
<a href="/radio/login.php" class="btn-secondary-large"><?= t('radio.cta_station_login') ?></a>
</div>
</div>
</section>
<!-- Live Radio Player Section - ALWAYS SHOW -->
<section class="live-radio-section" style="position: relative; z-index: 1; padding: 4rem 2rem; background: rgba(26, 26, 26, 0.9); backdrop-filter: blur(20px); border-top: 1px solid rgba(102, 126, 234, 0.3); border-bottom: 1px solid rgba(102, 126, 234, 0.3);">
<div style="max-width: 1400px; margin: 0 auto;">
<div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem;">
<div style="display: flex; align-items: center; gap: 0.75rem;">
<?php if ($has_live_stream): ?>
<div style="width: 12px; height: 12px; background: #ef4444; border-radius: 50%; animation: pulse 2s ease-in-out infinite;"></div>
<span style="color: #ef4444; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 0.9rem;">LIVE NOW</span>
<?php else: ?>
<div style="width: 12px; height: 12px; background: #9ca3af; border-radius: 50%;"></div>
<span style="color: #9ca3af; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 0.9rem;">OFFLINE</span>
<?php endif; ?>
</div>
<div style="flex: 1; height: 1px; background: linear-gradient(90deg, rgba(102, 126, 234, 0.3) 0%, transparent 100%);"></div>
<?php if ($has_live_stream): ?>
<div style="color: #a0aec0; font-size: 0.9rem;">
<span style="color: #667eea; font-weight: 600;" id="live-listener-count"><?= number_format($listener_count) ?></span> listeners
</div>
<?php endif; ?>
</div>
<div style="display: grid; grid-template-columns: auto 1fr auto; gap: 2rem; align-items: center; background: rgba(0, 0, 0, 0.4); padding: 2rem; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.1);">
<?php if ($has_live_stream && $live_stream): ?>
<!-- Station Logo/Info -->
<div style="text-align: center;">
<?php if (!empty($live_stream['logo_url'])): ?>
<img src="<?= htmlspecialchars($live_stream['logo_url']) ?>" alt="<?= htmlspecialchars($live_stream['station_name']) ?>" style="width: 120px; height: 120px; border-radius: 16px; margin-bottom: 1rem; object-fit: cover;">
<?php else: ?>
<div style="width: 120px; height: 120px; border-radius: 16px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; font-weight: bold; margin: 0 auto 1rem;"><?= strtoupper(substr($live_stream['station_name'] ?? 'SS', 0, 2)) ?></div>
<?php endif; ?>
<div style="font-weight: 700; font-size: 1.1rem; margin-bottom: 0.25rem;"><?= htmlspecialchars($live_stream['station_name'] ?? 'SoundStudioPro Radio') ?></div>
<?php if (!empty($live_stream['call_sign'])): ?>
<div style="color: #a0aec0; font-size: 0.9rem;"><?= htmlspecialchars($live_stream['call_sign']) ?></div>
<?php endif; ?>
</div>
<!-- Now Playing -->
<div>
<?php if ($now_playing): ?>
<div style="margin-bottom: 1rem;">
<div style="color: #a0aec0; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.5rem;">Now Playing</div>
<div style="font-size: 2rem; font-weight: 700; margin-bottom: 0.5rem;" id="live-track-title"><?= htmlspecialchars($now_playing['title']) ?></div>
<div style="font-size: 1.2rem; color: #667eea;" id="live-track-artist">
<?= htmlspecialchars($now_playing['artist_name'] ?? 'Unknown Artist') ?>
</div>
</div>
<?php if (!empty($now_playing['audio_url'])): ?>
<audio controls style="width: 100%; height: 50px; margin-top: 1rem;" id="live-audio-player">
<source src="<?= htmlspecialchars($now_playing['audio_url']) ?>" type="audio/mpeg">
</audio>
<?php endif; ?>
<?php else: ?>
<div style="text-align: center; padding: 2rem;">
<div style="color: #a0aec0; font-size: 1.1rem;">Stream starting soon...</div>
</div>
<?php endif; ?>
</div>
<!-- Listen Live Button -->
<div>
<a href="/radio/live.php?station=<?= $live_stream['id'] ?>"
style="display: inline-block; padding: 1rem 2rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; text-decoration: none; border-radius: 12px; font-weight: 600; transition: all 0.3s; box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);"
onmouseover="this.style.transform='translateY(-3px)'; this.style.boxShadow='0 15px 40px rgba(102, 126, 234, 0.4)';"
onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 10px 30px rgba(102, 126, 234, 0.3)';">
🎧 Listen Live
</a>
<div style="text-align: center; margin-top: 1rem; color: #a0aec0; font-size: 0.85rem;">
Vote for next tracks
</div>
</div>
<?php else: ?>
<!-- No Live Stream - Show Placeholder -->
<div style="text-align: center; grid-column: 1 / -1; padding: 3rem 2rem;">
<div style="width: 120px; height: 120px; border-radius: 16px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; font-size: 3rem; margin: 0 auto 2rem; opacity: 0.5;">📻</div>
<h3 style="font-size: 1.8rem; font-weight: 700; margin-bottom: 1rem; color: #ffffff;">No Live Streams Currently</h3>
<p style="color: #a0aec0; font-size: 1.1rem; margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto;">
Be the first to start a live stream! Radio stations can broadcast live and let listeners tune in, vote for tracks, and interact in real-time.
</p>
<div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
<a href="/radio/register.php" style="display: inline-block; padding: 1rem 2rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; text-decoration: none; border-radius: 12px; font-weight: 600;">
Start Your Station
</a>
<a href="/radio/live.php" style="display: inline-block; padding: 1rem 2rem; background: rgba(255, 255, 255, 0.1); color: white; text-decoration: none; border-radius: 12px; font-weight: 600; border: 1px solid rgba(255, 255, 255, 0.2);">
View Live Player
</a>
</div>
</div>
<?php endif; ?>
</div>
</div>
</section>
<!-- Stats Section -->
<section class="radio-stats">
<div class="stats-container">
<div class="stat-item">
<div class="stat-number"><?= number_format($stats['stations'] + 50) ?>+</div>
<div class="stat-label"><?= t('radio.stats_stations') ?></div>
</div>
<div class="stat-item">
<div class="stat-number"><?= number_format($stats['tracks'] + 10000) ?>+</div>
<div class="stat-label"><?= t('radio.stats_tracks') ?></div>
</div>
<div class="stat-item">
<div class="stat-number"><?= number_format($stats['plays'] + 100000) ?>+</div>
<div class="stat-label"><?= t('radio.stats_plays') ?></div>
</div>
<div class="stat-item">
<div class="stat-number"><?= number_format($stats['artists'] + 5000) ?>+</div>
<div class="stat-label"><?= t('radio.stats_artists') ?></div>
</div>
</div>
</section>
<!-- Features Section -->
<section class="radio-features">
<div class="section-header">
<div class="section-badge"><?= t('radio.section_badge_features') ?></div>
<h2 class="section-title"><?= t('radio.section_title_features') ?></h2>
<p class="section-subtitle">
<?= t('radio.section_subtitle_features') ?>
</p>
</div>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">🎵</div>
<h3><?= t('radio.feature_catalog_title') ?></h3>
<p><?= t('radio.feature_catalog_desc') ?></p>
</div>
<div class="feature-card">
<div class="feature-icon">📊</div>
<h3><?= t('radio.feature_compliance_title') ?></h3>
<p><?= t('radio.feature_compliance_desc') ?></p>
</div>
<div class="feature-card">
<div class="feature-icon">🔌</div>
<h3><?= t('radio.feature_api_title') ?></h3>
<p><?= t('radio.feature_api_desc') ?></p>
</div>
<div class="feature-card">
<div class="feature-icon">💰</div>
<h3><?= t('radio.feature_royalties_title') ?></h3>
<p><?= t('radio.feature_royalties_desc') ?></p>
</div>
<div class="feature-card">
<div class="feature-icon">📈</div>
<h3><?= t('radio.feature_analytics_title') ?></h3>
<p><?= t('radio.feature_analytics_desc') ?></p>
</div>
<div class="feature-card">
<div class="feature-icon">🎛️</div>
<h3><?= t('radio.feature_playlists_title') ?></h3>
<p><?= t('radio.feature_playlists_desc') ?></p>
</div>
</div>
</section>
<!-- API Showcase -->
<section class="api-showcase">
<div class="api-showcase-content">
<div>
<div class="section-badge"><?= t('radio.api_badge') ?></div>
<h2 class="section-title" style="text-align: left; margin-bottom: 1rem;"><?= t('radio.api_title') ?></h2>
<p class="section-subtitle" style="text-align: left; margin-bottom: 2rem;">
<?= t('radio.api_subtitle') ?>
</p>
<ul style="list-style: none; padding: 0; color: #a0aec0; line-height: 2;">
<li><?= t('radio.api_feature_1') ?></li>
<li><?= t('radio.api_feature_2') ?></li>
<li><?= t('radio.api_feature_3') ?></li>
<li><?= t('radio.api_feature_4') ?></li>
<li><?= t('radio.api_feature_5') ?></li>
</ul>
</div>
<div class="api-code-block">
<div class="code-line"><span class="code-keyword">POST</span> <span class="code-string">/api/radio/v1/plays</span></div>
<div class="code-line"><span class="code-comment"><?= t('radio.api_code_comment') ?></span></div>
<div class="code-line">{</div>
<div class="code-line"> <span class="code-keyword">"track_id"</span>: <span class="code-string">123</span>,</div>
<div class="code-line"> <span class="code-keyword">"played_at"</span>: <span class="code-string">"2025-01-15T10:30:00Z"</span>,</div>
<div class="code-line"> <span class="code-keyword">"duration_played"</span>: <span class="code-string">180</span>,</div>
<div class="code-line"> <span class="code-keyword">"play_type"</span>: <span class="code-string">"full"</span></div>
<div class="code-line">}</div>
</div>
</div>
</section>
<!-- Pricing Section -->
<section class="radio-pricing">
<div class="pricing-container">
<div class="section-header">
<div class="section-badge"><?= t('radio.section_badge_pricing') ?></div>
<h2 class="section-title"><?= t('radio.section_title_pricing') ?></h2>
<p class="section-subtitle">
<?= t('radio.section_subtitle_pricing') ?>
</p>
</div>
<div class="pricing-grid">
<div class="pricing-card">
<h3><?= t('radio.pricing_local_title') ?></h3>
<div class="pricing-amount">$99<span class="pricing-period"><?= t('radio.pricing_local_price') ?></span></div>
<ul class="pricing-features">
<li><?= t('radio.pricing_local_feature_1') ?></li>
<li><?= t('radio.pricing_local_feature_2') ?></li>
<li><?= t('radio.pricing_local_feature_3') ?></li>
<li><?= t('radio.pricing_local_feature_4') ?></li>
<li><?= t('radio.pricing_local_feature_5') ?></li>
<li><?= t('radio.pricing_local_feature_6') ?></li>
<li><?= t('radio.pricing_local_feature_7') ?></li>
</ul>
<a href="/radio/register.php?tier=local" class="btn-primary-large"><span><?= t('radio.pricing_cta') ?></span></a>
</div>
<div class="pricing-card featured">
<div class="pricing-badge"><?= t('radio.pricing_popular') ?></div>
<h3><?= t('radio.pricing_regional_title') ?></h3>
<div class="pricing-amount">$299<span class="pricing-period"><?= t('radio.pricing_regional_price') ?></span></div>
<ul class="pricing-features">
<li><?= t('radio.pricing_regional_feature_1') ?></li>
<li><?= t('radio.pricing_regional_feature_2') ?></li>
<li><?= t('radio.pricing_regional_feature_3') ?></li>
<li><?= t('radio.pricing_regional_feature_4') ?></li>
<li><?= t('radio.pricing_regional_feature_5') ?></li>
<li><?= t('radio.pricing_regional_feature_6') ?></li>
<li><?= t('radio.pricing_regional_feature_7') ?></li>
<li><?= t('radio.pricing_regional_feature_8') ?></li>
</ul>
<a href="/radio/register.php?tier=regional" class="btn-primary-large"><span><?= t('radio.pricing_cta') ?></span></a>
</div>
<div class="pricing-card">
<h3><?= t('radio.pricing_national_title') ?></h3>
<div class="pricing-amount">$999<span class="pricing-period"><?= t('radio.pricing_national_price') ?></span></div>
<ul class="pricing-features">
<li><?= t('radio.pricing_national_feature_1') ?></li>
<li><?= t('radio.pricing_national_feature_2') ?></li>
<li><?= t('radio.pricing_national_feature_3') ?></li>
<li><?= t('radio.pricing_national_feature_4') ?></li>
<li><?= t('radio.pricing_national_feature_5') ?></li>
<li><?= t('radio.pricing_national_feature_6') ?></li>
<li><?= t('radio.pricing_national_feature_7') ?></li>
<li><?= t('radio.pricing_national_feature_8') ?></li>
</ul>
<a href="/radio/register.php?tier=national" class="btn-primary-large"><span><?= t('radio.pricing_cta') ?></span></a>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="radio-testimonials">
<div class="section-header">
<div class="section-badge"><?= t('radio.section_badge_testimonials') ?></div>
<h2 class="section-title"><?= t('radio.section_title_testimonials') ?></h2>
<p class="section-subtitle"><?= t('radio.section_subtitle_testimonials') ?></p>
</div>
<div class="testimonials-grid">
<div class="testimonial-card">
<p class="testimonial-text">
<?= t('radio.testimonial_1_text') ?>
</p>
<div class="testimonial-author">
<div class="author-avatar">SM</div>
<div class="author-info">
<h4><?= t('radio.testimonial_1_author') ?></h4>
<p><?= t('radio.testimonial_1_role') ?></p>
</div>
</div>
</div>
<div class="testimonial-card">
<p class="testimonial-text">
<?= t('radio.testimonial_2_text') ?>
</p>
<div class="testimonial-author">
<div class="author-avatar">JD</div>
<div class="author-info">
<h4><?= t('radio.testimonial_2_author') ?></h4>
<p><?= t('radio.testimonial_2_role') ?></p>
</div>
</div>
</div>
<div class="testimonial-card">
<p class="testimonial-text">
<?= t('radio.testimonial_3_text') ?>
</p>
<div class="testimonial-author">
<div class="author-avatar">MW</div>
<div class="author-info">
<h4><?= t('radio.testimonial_3_author') ?></h4>
<p><?= t('radio.testimonial_3_role') ?></p>
</div>
</div>
</div>
</div>
</section>
<!-- Benefits Section -->
<section class="radio-benefits">
<div class="section-header">
<div class="section-badge"><?= t('radio.section_badge_benefits') ?></div>
<h2 class="section-title"><?= t('radio.section_title_benefits') ?></h2>
<p class="section-subtitle">
<?= t('radio.section_subtitle_benefits') ?>
</p>
</div>
<div class="benefits-list">
<div class="benefit-item">
<div class="benefit-icon">⚡</div>
<div class="benefit-content">
<h4><?= t('radio.benefit_time_title') ?></h4>
<p><?= t('radio.benefit_time_desc') ?></p>
</div>
</div>
<div class="benefit-item">
<div class="benefit-icon">🎯</div>
<div class="benefit-content">
<h4><?= t('radio.benefit_compliance_title') ?></h4>
<p><?= t('radio.benefit_compliance_desc') ?></p>
</div>
</div>
<div class="benefit-item">
<div class="benefit-icon">🔒</div>
<div class="benefit-content">
<h4><?= t('radio.benefit_security_title') ?></h4>
<p><?= t('radio.benefit_security_desc') ?></p>
</div>
</div>
<div class="benefit-item">
<div class="benefit-icon">🌍</div>
<div class="benefit-content">
<h4><?= t('radio.benefit_catalog_title') ?></h4>
<p><?= t('radio.benefit_catalog_desc') ?></p>
</div>
</div>
<div class="benefit-item">
<div class="benefit-icon">📱</div>
<div class="benefit-content">
<h4><?= t('radio.benefit_mobile_title') ?></h4>
<p><?= t('radio.benefit_mobile_desc') ?></p>
</div>
</div>
<div class="benefit-item">
<div class="benefit-icon">🤝</div>
<div class="benefit-content">
<h4><?= t('radio.benefit_artists_title') ?></h4>
<p><?= t('radio.benefit_artists_desc') ?></p>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="radio-cta">
<div class="radio-cta-content">
<h2><?= t('radio.cta_title') ?></h2>
<p>
<?= t('radio.cta_subtitle') ?>
</p>
<div class="cta-buttons">
<a href="/radio/register.php" class="btn-primary-large">
<span><?= t('radio.cta_start_trial') ?></span>
</a>
<a href="/contact.php" class="btn-secondary-large"><?= t('radio.cta_schedule_demo') ?></a>
</div>
</div>
</section>
</div>
<script>
// Intersection Observer for animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -100px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, observerOptions);
// Observe all animated elements
document.addEventListener('DOMContentLoaded', function() {
// Stats animation
document.querySelectorAll('.stat-item').forEach((item, index) => {
item.style.transitionDelay = `${index * 0.1}s`;
observer.observe(item);
});
// Feature cards
document.querySelectorAll('.feature-card').forEach((card, index) => {
card.style.transitionDelay = `${index * 0.1}s`;
observer.observe(card);
});
// Pricing cards
document.querySelectorAll('.pricing-card').forEach((card, index) => {
card.style.transitionDelay = `${index * 0.15}s`;
observer.observe(card);
});
// Testimonials
document.querySelectorAll('.testimonial-card').forEach((card, index) => {
card.style.transitionDelay = `${index * 0.1}s`;
observer.observe(card);
});
// Benefits
document.querySelectorAll('.benefit-item').forEach((item, index) => {
item.style.transitionDelay = `${index * 0.1}s`;
observer.observe(item);
});
// Animate numbers
function animateNumber(element, target) {
const duration = 2000;
const start = 0;
const increment = target / (duration / 16);
let current = start;
const timer = setInterval(() => {
current += increment;
if (current >= target) {
element.textContent = Math.floor(target).toLocaleString() + '+';
clearInterval(timer);
} else {
element.textContent = Math.floor(current).toLocaleString() + '+';
}
}, 16);
}
// Start number animation when stats are visible
const statsObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const number = entry.target.textContent.replace(/[^0-9]/g, '');
if (number) {
animateNumber(entry.target, parseInt(number));
statsObserver.unobserve(entry.target);
}
}
});
}, { threshold: 0.5 });
document.querySelectorAll('.stat-number').forEach(stat => {
statsObserver.observe(stat);
});
// Real-time updates for live player (if on page)
<?php if ($has_live_stream && $live_stream && isset($live_stream['stream_id']) && $live_stream['stream_id']): ?>
const streamId = <?= $live_stream['stream_id'] ?>;
const eventSource = new EventSource(`/radio/api/live/stream.php?stream_id=${streamId}`);
eventSource.onmessage = function(event) {
const data = JSON.parse(event.data);
if (data.type === 'listener_count') {
const countEl = document.getElementById('live-listener-count');
if (countEl) {
countEl.textContent = parseInt(data.count).toLocaleString();
}
}
if (data.type === 'now_playing') {
const titleEl = document.getElementById('live-track-title');
const artistEl = document.getElementById('live-track-artist');
const audioEl = document.getElementById('live-audio-player');
if (titleEl && data.track) {
titleEl.textContent = data.track.title;
}
if (artistEl && data.track) {
artistEl.textContent = data.track.artist || 'Unknown Artist';
}
if (audioEl && data.track && data.track.audio_url) {
audioEl.src = data.track.audio_url;
audioEl.load();
}
}
};
eventSource.onerror = function(error) {
console.error('SSE error:', error);
};
<?php endif; ?>
});
</script>
<?php include __DIR__ . '/../includes/footer.php'; ?>
</body>
</html>