 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/ |
<?php
session_start();
// Include translation system
require_once 'includes/translations.php';
// Handle AJAX requests
$is_ajax = isset($_GET['ajax']) && $_GET['ajax'] == '1';
// Set page variables for header
$page_title = t('holiday.page_title');
$page_description = t('holiday.page_description');
$current_page = 'holiday_gift';
// Enhanced OG meta tags
$og_title = t('holiday.og_title');
$og_description = t('holiday.og_description');
$host = $_SERVER['HTTP_HOST'] ?? 'soundstudiopro.com';
$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'https' : 'http';
// Use static screenshot of the beautiful page design
$og_image = $protocol . '://' . $host . '/assets/images/holiday-og-image.png';
$og_type = 'website';
// Include header only for full page loads
if (!$is_ajax) {
include 'includes/header.php';
} else {
echo '<div class="container" id="pageContainer">';
}
// Check if user is logged in
$is_logged_in = isset($_SESSION['user_id']);
$user_name = $_SESSION['user_name'] ?? 'Friend';
?>
<style>
/* Holiday Gift Certificate Page Styles */
.holiday-gift-page {
min-height: 100vh;
background: linear-gradient(135deg, #0a0a0a 0%, #1a0f1a 25%, #0f1a1a 50%, #1a0f1a 75%, #0a0a0a 100%);
position: relative;
overflow: hidden;
padding: 2rem 0;
}
/* Particle Canvas Background */
.particles-canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
}
/* Main Content Container */
.holiday-content {
position: relative;
z-index: 1;
max-width: 1200px;
margin: 0 auto;
padding: 4rem 2rem;
}
/* Hero Section */
.holiday-hero {
text-align: center;
margin-bottom: 4rem;
animation: fadeInUp 1s ease-out;
}
.holiday-badge {
display: inline-block;
background: linear-gradient(135deg, rgba(220, 38, 38, 0.2), rgba(234, 88, 12, 0.2));
color: #fca5a5;
padding: 1rem 2rem;
border-radius: 50px;
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 2rem;
backdrop-filter: blur(10px);
border: 2px solid rgba(220, 38, 38, 0.3);
box-shadow: 0 0 30px rgba(220, 38, 38, 0.3);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); box-shadow: 0 0 30px rgba(220, 38, 38, 0.3); }
50% { transform: scale(1.05); box-shadow: 0 0 50px rgba(220, 38, 38, 0.5); }
}
.holiday-title {
font-size: clamp(3rem, 8vw, 6rem);
font-weight: 900;
background: linear-gradient(135deg, #fca5a5 0%, #fb923c 25%, #fbbf24 50%, #34d399 75%, #60a5fa 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 1.5rem;
text-shadow: 0 0 40px rgba(252, 165, 165, 0.5);
animation: shimmer 3s ease-in-out infinite;
line-height: 1.1;
}
@keyframes shimmer {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.3); }
}
.holiday-subtitle {
font-size: clamp(1.5rem, 4vw, 2.5rem);
color: #e5e7eb;
margin-bottom: 3rem;
font-weight: 300;
letter-spacing: 0.05em;
}
/* Large Festive Icons */
.holiday-icons {
display: flex;
justify-content: center;
align-items: center;
gap: 3rem;
margin: 4rem 0;
flex-wrap: wrap;
}
.holiday-icon {
font-size: clamp(4rem, 10vw, 8rem);
color: #fca5a5;
animation: float 3s ease-in-out infinite;
filter: drop-shadow(0 0 20px rgba(252, 165, 165, 0.6));
transition: transform 0.3s ease;
}
.holiday-icon:nth-child(1) { animation-delay: 0s; }
.holiday-icon:nth-child(2) { animation-delay: 0.5s; color: #fb923c; filter: drop-shadow(0 0 20px rgba(251, 146, 60, 0.6)); }
.holiday-icon:nth-child(3) { animation-delay: 1s; color: #fbbf24; filter: drop-shadow(0 0 20px rgba(251, 191, 36, 0.6)); }
.holiday-icon:nth-child(4) { animation-delay: 1.5s; color: #34d399; filter: drop-shadow(0 0 20px rgba(52, 211, 153, 0.6)); }
@keyframes float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-20px) rotate(5deg); }
}
.holiday-icon:hover {
transform: scale(1.2) rotate(15deg);
}
/* Gift Certificate Card */
.gift-certificate {
background: linear-gradient(135deg, rgba(26, 26, 26, 0.95) 0%, rgba(30, 20, 30, 0.95) 100%);
border: 3px solid;
border-image: linear-gradient(135deg, #fca5a5, #fb923c, #fbbf24, #34d399, #60a5fa) 1;
border-radius: 2rem;
padding: 4rem;
margin: 4rem auto;
max-width: 800px;
backdrop-filter: blur(20px);
box-shadow:
0 0 60px rgba(252, 165, 165, 0.3),
0 0 100px rgba(251, 146, 60, 0.2),
inset 0 0 60px rgba(52, 211, 153, 0.1);
position: relative;
overflow: hidden;
animation: fadeInUp 1s ease-out 0.3s both;
}
.gift-certificate::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(252, 165, 165, 0.1) 0%, transparent 70%);
animation: rotate 20s linear infinite;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.gift-certificate-content {
position: relative;
z-index: 1;
}
.certificate-title {
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 800;
background: linear-gradient(135deg, #fca5a5 0%, #fb923c 50%, #fbbf24 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 2rem;
text-align: center;
}
.certificate-description {
font-size: clamp(1.1rem, 2.5vw, 1.5rem);
color: #e5e7eb;
line-height: 1.8;
margin-bottom: 3rem;
text-align: center;
}
.gift-highlight {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin: 3rem 0;
padding: 2rem;
background: linear-gradient(135deg, rgba(252, 165, 165, 0.1), rgba(251, 146, 60, 0.1));
border-radius: 1.5rem;
border: 2px solid rgba(252, 165, 165, 0.3);
}
.gift-number {
font-size: clamp(4rem, 10vw, 8rem);
font-weight: 900;
background: linear-gradient(135deg, #fca5a5, #fb923c);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
filter: drop-shadow(0 0 20px rgba(252, 165, 165, 0.6));
}
.gift-text {
font-size: clamp(1.5rem, 4vw, 2.5rem);
color: #fca5a5;
font-weight: 700;
}
/* Claim Button */
.claim-button-container {
text-align: center;
margin-top: 3rem;
}
.claim-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 1rem;
padding: 1.5rem 4rem;
font-size: clamp(1.2rem, 3vw, 1.8rem);
font-weight: 700;
color: #0a0a0a;
background: linear-gradient(135deg, #fca5a5 0%, #fb923c 25%, #fbbf24 50%, #34d399 75%, #60a5fa 100%);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow:
0 0 30px rgba(252, 165, 165, 0.5),
0 0 60px rgba(251, 146, 60, 0.3);
position: relative;
overflow: hidden;
text-decoration: none;
}
.claim-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transition: left 0.5s ease;
}
.claim-button:hover::before {
left: 100%;
}
.claim-button:hover {
transform: translateY(-3px) scale(1.05);
box-shadow:
0 0 50px rgba(252, 165, 165, 0.7),
0 0 100px rgba(251, 146, 60, 0.5);
}
.claim-button:active {
transform: translateY(-1px) scale(1.02);
}
.claim-button:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.claim-button i {
font-size: 1.5em;
}
/* Login Prompt */
.login-prompt {
text-align: center;
margin-top: 3rem;
padding: 2rem;
background: rgba(26, 26, 26, 0.6);
border-radius: 1rem;
border: 2px solid rgba(102, 126, 234, 0.3);
}
.login-prompt p {
color: #e5e7eb;
font-size: 1.2rem;
margin-bottom: 1.5rem;
}
.login-link {
display: inline-block;
padding: 1rem 2rem;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.login-link:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
}
/* Success Message */
.success-message {
text-align: center;
padding: 3rem;
background: linear-gradient(135deg, rgba(52, 211, 153, 0.2), rgba(34, 197, 94, 0.2));
border: 2px solid rgba(52, 211, 153, 0.5);
border-radius: 1.5rem;
margin: 2rem 0;
animation: fadeInUp 0.5s ease-out;
}
.success-message i {
font-size: 4rem;
color: #34d399;
margin-bottom: 1rem;
animation: bounce 1s ease-in-out infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.success-message h3 {
font-size: 2rem;
color: #34d399;
margin-bottom: 1rem;
}
.success-message p {
font-size: 1.2rem;
color: #e5e7eb;
}
/* Error Message */
.error-message {
text-align: center;
padding: 2rem;
background: rgba(220, 38, 38, 0.2);
border: 2px solid rgba(220, 38, 38, 0.5);
border-radius: 1rem;
margin: 2rem 0;
color: #fca5a5;
}
/* Features Section */
.holiday-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin: 4rem 0;
}
.feature-card {
background: rgba(26, 26, 26, 0.6);
border: 2px solid rgba(252, 165, 165, 0.2);
border-radius: 1.5rem;
padding: 2rem;
text-align: center;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.feature-card:hover {
transform: translateY(-5px);
border-color: rgba(252, 165, 165, 0.5);
box-shadow: 0 10px 30px rgba(252, 165, 165, 0.3);
}
.feature-icon {
font-size: 3rem;
color: #fca5a5;
margin-bottom: 1rem;
}
.feature-title {
font-size: 1.3rem;
color: #fca5a5;
margin-bottom: 0.5rem;
font-weight: 700;
}
.feature-text {
color: #e5e7eb;
font-size: 1rem;
line-height: 1.6;
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive Design */
@media (max-width: 768px) {
.holiday-content {
padding: 2rem 1rem;
}
.gift-certificate {
padding: 2rem 1.5rem;
}
.holiday-icons {
gap: 1.5rem;
}
.claim-button {
padding: 1.2rem 2.5rem;
font-size: 1.2rem;
}
}
</style>
<div class="holiday-gift-page">
<!-- Particle Canvas -->
<canvas class="particles-canvas" id="particlesCanvas"></canvas>
<div class="holiday-content">
<!-- Hero Section -->
<div class="holiday-hero">
<div class="holiday-badge"><?= t('holiday.badge') ?></div>
<h1 class="holiday-title"><?= t('holiday.title') ?></h1>
<p class="holiday-subtitle"><?= t('holiday.subtitle') ?></p>
<!-- Large Festive Icons -->
<div class="holiday-icons">
<i class="fas fa-gift holiday-icon"></i>
<i class="fas fa-music holiday-icon"></i>
<i class="fas fa-star holiday-icon"></i>
<i class="fas fa-heart holiday-icon"></i>
</div>
</div>
<!-- Gift Certificate Card -->
<div class="gift-certificate">
<div class="gift-certificate-content">
<h2 class="certificate-title"><?= t('holiday.certificate_title') ?></h2>
<p class="certificate-description">
<?= t('holiday.certificate_description') ?>
</p>
<div class="gift-highlight">
<span class="gift-number">5</span>
<span class="gift-text"><?= t('holiday.free_songs') ?></span>
</div>
<?php if ($is_logged_in): ?>
<div id="claimSection">
<div class="claim-button-container">
<button class="claim-button" id="claimButton" onclick="claimHolidayGift()">
<i class="fas fa-gift"></i>
<span><?= t('holiday.claim_button') ?></span>
</button>
</div>
</div>
<div id="claimResult"></div>
<?php else: ?>
<div class="login-prompt">
<p><?= t('holiday.login_prompt') ?></p>
<a href="/auth/login.php?redirect=<?= urlencode('/holiday_gift.php') ?>" class="login-link">
<i class="fas fa-sign-in-alt"></i> <?= t('holiday.login_link') ?>
</a>
</div>
<?php endif; ?>
</div>
</div>
<!-- Features Section -->
<div class="holiday-features">
<div class="feature-card">
<div class="feature-icon"><i class="fas fa-magic"></i></div>
<h3 class="feature-title"><?= t('holiday.feature.ai_powered.title') ?></h3>
<p class="feature-text"><?= t('holiday.feature.ai_powered.text') ?></p>
</div>
<div class="feature-card">
<div class="feature-icon"><i class="fas fa-infinity"></i></div>
<h3 class="feature-title"><?= t('holiday.feature.unlimited.title') ?></h3>
<p class="feature-text"><?= t('holiday.feature.unlimited.text') ?></p>
</div>
<div class="feature-card">
<div class="feature-icon"><i class="fas fa-download"></i></div>
<h3 class="feature-title"><?= t('holiday.feature.instant.title') ?></h3>
<p class="feature-text"><?= t('holiday.feature.instant.text') ?></p>
</div>
<div class="feature-card">
<div class="feature-icon"><i class="fas fa-copyright"></i></div>
<h3 class="feature-title"><?= t('holiday.feature.commercial.title') ?></h3>
<p class="feature-text"><?= t('holiday.feature.commercial.text') ?></p>
</div>
</div>
</div>
</div>
<script>
// Particle System for Christmas Glow
const canvas = document.getElementById('particlesCanvas');
const ctx = canvas.getContext('2d');
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
// Particle class
class Particle {
constructor() {
this.reset();
}
reset() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.size = Math.random() * 3 + 1;
this.speedX = (Math.random() - 0.5) * 0.5;
this.speedY = (Math.random() - 0.5) * 0.5;
this.opacity = Math.random() * 0.5 + 0.2;
this.color = this.getRandomColor();
}
getRandomColor() {
const colors = [
'rgba(252, 165, 165, 0.8)', // Red
'rgba(251, 146, 60, 0.8)', // Orange
'rgba(251, 191, 36, 0.8)', // Yellow
'rgba(52, 211, 153, 0.8)', // Green
'rgba(96, 165, 250, 0.8)' // Blue
];
return colors[Math.floor(Math.random() * colors.length)];
}
update() {
this.x += this.speedX;
this.y += this.speedY;
// Wrap around edges
if (this.x < 0) this.x = canvas.width;
if (this.x > canvas.width) this.x = 0;
if (this.y < 0) this.y = canvas.height;
if (this.y > canvas.height) this.y = 0;
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.globalAlpha = this.opacity;
ctx.fill();
// Add glow effect
ctx.shadowBlur = 15;
ctx.shadowColor = this.color;
ctx.fill();
ctx.shadowBlur = 0;
}
}
// Create particles
const particles = [];
const particleCount = 100;
for (let i = 0; i < particleCount; i++) {
particles.push(new Particle());
}
// Animation loop
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
particles.forEach(particle => {
particle.update();
particle.draw();
});
// Connect nearby particles
for (let i = 0; i < particles.length; i++) {
for (let j = i + 1; j < particles.length; j++) {
const dx = particles[i].x - particles[j].x;
const dy = particles[i].y - particles[j].y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 150) {
ctx.beginPath();
ctx.strokeStyle = `rgba(252, 165, 165, ${0.2 * (1 - distance / 150)})`;
ctx.lineWidth = 1;
ctx.moveTo(particles[i].x, particles[i].y);
ctx.lineTo(particles[j].x, particles[j].y);
ctx.stroke();
}
}
}
requestAnimationFrame(animate);
}
animate();
// Claim Holiday Gift Function
function claimHolidayGift() {
const button = document.getElementById('claimButton');
const resultDiv = document.getElementById('claimResult');
const claimingText = <?= json_encode(t('holiday.claiming'), JSON_HEX_APOS | JSON_HEX_QUOT | JSON_UNESCAPED_UNICODE) ?>;
// Disable button and show loading
button.disabled = true;
button.innerHTML = '<i class="fas fa-spinner fa-spin"></i> <span>' + claimingText + '</span>';
// Make API call
fetch('/api_claim_holiday_gift.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({})
})
.then(response => response.json())
.then(data => {
if (data.success) {
const successTitle = <?= json_encode(t('holiday.success_title'), JSON_HEX_APOS | JSON_HEX_QUOT | JSON_UNESCAPED_UNICODE) ?>;
const successMessage = <?= json_encode(t('holiday.success_message'), JSON_HEX_APOS | JSON_HEX_QUOT | JSON_UNESCAPED_UNICODE) ?>;
const createFirstSong = <?= json_encode(t('holiday.create_first_song'), JSON_HEX_APOS | JSON_HEX_QUOT | JSON_UNESCAPED_UNICODE) ?>;
resultDiv.innerHTML = `
<div class="success-message">
<i class="fas fa-check-circle"></i>
<h3>${successTitle}</h3>
<p>${successMessage}</p>
<a href="/create_music.php" class="claim-button" style="margin-top: 1.5rem; display: inline-block;">
<i class="fas fa-music"></i> ${createFirstSong}
</a>
</div>
`;
button.style.display = 'none';
// Update session credits if available
if (data.new_credits !== undefined) {
// Reload page to update credits in header
setTimeout(() => {
window.location.reload();
}, 2000);
}
} else {
const errorOops = <?= json_encode(t('holiday.error_oops'), JSON_HEX_APOS | JSON_HEX_QUOT | JSON_UNESCAPED_UNICODE) ?>;
const errorMessage = <?= json_encode(t('holiday.error_message'), JSON_HEX_APOS | JSON_HEX_QUOT | JSON_UNESCAPED_UNICODE) ?>;
const claimButton = <?= json_encode(t('holiday.claim_button'), JSON_HEX_APOS | JSON_HEX_QUOT | JSON_UNESCAPED_UNICODE) ?>;
resultDiv.innerHTML = `
<div class="error-message">
<i class="fas fa-exclamation-circle"></i>
<p><strong>${errorOops}</strong> ${data.message || errorMessage}</p>
</div>
`;
button.disabled = false;
button.innerHTML = '<i class="fas fa-gift"></i> <span>' + claimButton + '</span>';
}
})
.catch(error => {
console.error('Error:', error);
const errorUnable = <?= json_encode(t('holiday.error_unable'), JSON_HEX_APOS | JSON_HEX_QUOT | JSON_UNESCAPED_UNICODE) ?>;
const claimButton = <?= json_encode(t('holiday.claim_button'), JSON_HEX_APOS | JSON_HEX_QUOT | JSON_UNESCAPED_UNICODE) ?>;
resultDiv.innerHTML = `
<div class="error-message">
<i class="fas fa-exclamation-circle"></i>
<p><strong>Error:</strong> ${errorUnable}</p>
</div>
`;
button.disabled = false;
button.innerHTML = '<i class="fas fa-gift"></i> <span>' + claimButton + '</span>';
});
}
</script>
<?php
if (!$is_ajax) {
include 'includes/footer.php';
} else {
echo '</div>';
}
?>