 Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory : /home/gositeme/domains/soundstudiopro.com/private_html/utils/ |
<?php
session_start();
require_once '../config/database.php';
// Check if user is logged in
if (!isset($_SESSION['user_id'])) {
header('Location: /auth/login.php');
exit;
}
$pdo = getDBConnection();
// Get user info with profile data
$stmt = $pdo->prepare("
SELECT u.*, up.bio, up.location, up.website, up.social_links, up.profile_image
FROM users u
LEFT JOIN user_profiles up ON u.id = up.user_id
WHERE u.id = ?
");
$stmt->execute([$_SESSION['user_id']]);
$user = $stmt->fetch();
// Set page variables for header
$page_title = 'Profile Settings - SoundStudioPro';
$page_description = 'Customize your profile, color scheme, and preferences.';
// Include header
include '../includes/header.php';
?>
<style>
.settings-container {
max-width: 80rem;
margin: 0 auto;
padding: 4rem 0;
}
.settings-section {
background: var(--bg-card);
border-radius: 20px;
padding: 3rem;
margin-bottom: 3rem;
box-shadow: var(--shadow-light);
border: 1px solid var(--border-light);
}
.section-title {
font-size: 2.4rem;
font-weight: 700;
margin-bottom: 2rem;
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: flex;
align-items: center;
gap: 1rem;
}
.color-scheme-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.color-scheme-card {
background: var(--bg-secondary);
border: 2px solid var(--border-light);
border-radius: 15px;
padding: 2rem;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
.color-scheme-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-medium);
border-color: var(--border-medium);
}
.color-scheme-card.active {
border-color: var(--primary-gradient);
box-shadow: 0 0 0 3px var(--shadow-light);
}
.color-preview {
width: 60px;
height: 60px;
border-radius: 50%;
margin: 0 auto 1rem;
border: 3px solid var(--border-light);
}
.color-scheme-name {
font-size: 1.6rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.5rem;
}
.color-scheme-desc {
font-size: 1.3rem;
color: var(--text-secondary);
}
.form-group {
margin-bottom: 2rem;
}
.form-label {
display: block;
font-size: 1.6rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 1rem;
}
.form-input { background: var(--bg-secondary);
color: var(--text-primary);
transition: all 0.3s ease;
}
.form-input:focus {
outline: none;
border-color: var(--primary-gradient);
box-shadow: 0 0 0 3px var(--shadow-light);
}
.save-btn {
background: var(--primary-gradient);
color: var(--text-primary);
border: none;
padding: 1.2rem 3rem;
border-radius: 12px;
font-size: 1.6rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: var(--shadow-light);
}
.save-btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-medium);
}
/* Profile Image Upload Styles */
.profile-image-upload {
display: flex;
align-items: center;
gap: 2rem;
margin-bottom: 2rem;
}
.current-image {
width: 8rem;
height: 8rem;
border-radius: 50%;
overflow: hidden;
background: var(--primary-gradient);
display: flex;
align-items: center;
justify-content: center;
border: 3px solid var(--border-light);
}
.current-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.default-profile-image {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 3rem;
font-weight: 700;
}
.upload-controls {
display: flex;
flex-direction: column;
gap: 1rem;
}
.upload-btn {
background: var(--primary-gradient);
color: white;
border: none;
padding: 1rem 2rem;
border-radius: 12px;
font-size: 1.4rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
}
.upload-btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-medium);
}
.remove-btn {
background: linear-gradient(135deg, #dc3545, #c82333);
color: white;
border: none;
padding: 1rem 2rem;
border-radius: 12px;
font-size: 1.4rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
}
.remove-btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-medium);
}
/* Enhanced Profile Settings Styles */
.genre-selection {
margin-top: 1rem;
}
.genre-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.genre-checkbox {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 1rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
}
.genre-checkbox:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(102, 126, 234, 0.3);
}
.genre-checkbox input[type="checkbox"] {
width: 1.8rem;
height: 1.8rem;
accent-color: #667eea;
}
.genre-label {
font-size: 1.4rem;
color: var(--text-primary);
font-weight: 500;
}
.highlights-input, .achievements-input {
margin-top: 1rem;
}
.highlight-inputs, .achievement-inputs {
display: flex;
flex-direction: column;
gap: 1rem;
}
.highlight-input, .achievement-input {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--text-primary);
transition: all 0.3s ease;
}
.highlight-input:focus, .achievement-input:focus {
outline: none;
border-color: var(--primary-gradient);
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}
.randomize-section {
text-align: center;
padding: 2rem;
background: var(--bg-tertiary);
border-radius: 15px;
margin-top: 2rem;
}
.randomize-btn-large {
background: var(--accent-gradient);
color: var(--text-primary);
border: none;
padding: 1.5rem 3rem;
border-radius: 15px;
font-size: 1.8rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: var(--shadow-light);
display: inline-flex;
align-items: center;
gap: 1rem;
}
.randomize-btn-large:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-medium);
}
.theme-description {
background: var(--bg-tertiary);
padding: 2rem;
border-radius: 15px;
margin-top: 2rem;
text-align: center;
}
.theme-description h3 {
font-size: 2rem;
color: var(--text-primary);
margin-bottom: 1rem;
}
.theme-description p {
font-size: 1.5rem;
color: var(--text-secondary);
line-height: 1.6;
}
</style>
<div class="settings-container">
<div class="settings-section">
<h2 class="section-title">
<i class="fas fa-palette"></i>
Color Scheme & Theme
</h2>
<p style="font-size: 1.6rem; color: var(--text-secondary); margin-bottom: 2rem;">
Choose your preferred color scheme to reflect your spiritual journey and creative inspiration.
</p>
<div class="color-scheme-grid">
<div class="color-scheme-card" data-theme="heavenly">
<div class="color-preview" style="background: var(--primary-gradient);"></div>
<div class="color-scheme-name">Heavenly Blue</div>
<div class="color-scheme-desc">Pure, uplifting, divine inspiration</div>
</div>
<div class="color-scheme-card" data-theme="divine">
<div class="color-preview" style="background: var(--primary-gradient);"></div>
<div class="color-scheme-name">Divine Purple</div>
<div class="color-scheme-desc">Royal, spiritual, majestic presence</div>
</div>
<div class="color-scheme-card" data-theme="celestial">
<div class="color-preview" style="background: var(--secondary-gradient);"></div>
<div class="color-scheme-name">Celestial Pink</div>
<div class="color-scheme-desc">Ethereal, angelic, heavenly grace</div>
</div>
<div class="color-scheme-card" data-theme="golden">
<div class="color-preview" style="background: var(--accent-gradient);"></div>
<div class="color-scheme-name">Golden Light</div>
<div class="color-scheme-desc">Warm, radiant, divine light</div>
</div>
<div class="color-scheme-card" data-theme="aurora">
<div class="color-preview" style="background: var(--secondary-gradient);"></div>
<div class="color-scheme-name">Aurora Dream</div>
<div class="color-scheme-desc">Peaceful, harmonious, spiritual balance</div>
</div>
<div class="color-scheme-card" data-theme="dark">
<div class="color-preview" style="background: var(--primary-gradient);"></div>
<div class="color-scheme-name">Dark Mode</div>
<div class="color-scheme-desc">Classic dark theme for focused creation</div>
</div>
</div>
<div class="randomize-section">
<h3 style="font-size: 2rem; color: var(--text-primary); margin-bottom: 1rem;">
🎲 Feeling Adventurous?
</h3>
<p style="font-size: 1.5rem; color: var(--text-secondary); margin-bottom: 2rem;">
Let the divine guide your color choice with our intelligent randomizer
</p>
<button class="randomize-btn-large" onclick="randomizeFromSettings()">
<i class="fas fa-dice"></i>
Random Divine Theme
</button>
</div>
<div class="theme-description">
<h3>🎵 Creating Music for Heaven</h3>
<p>
Each color scheme is carefully designed to inspire divine creativity and spiritual connection.
Whether you prefer the pure heavenly blues, the royal divine purples, or the warm golden light,
your choice reflects your unique spiritual journey in creating music that honors God.
</p>
</div>
</div>
<div class="settings-section">
<h2 class="section-title">
<i class="fas fa-user-edit"></i>
Profile Information
</h2>
<form id="profileForm">
<!-- Profile Image Upload -->
<div class="form-group">
<label class="form-label">Profile Image</label>
<div class="profile-image-upload">
<div class="current-image">
<?php if (!empty($user['profile_image'])): ?>
<img src="<?= htmlspecialchars($user['profile_image']) ?>" alt="<?= htmlspecialchars(ucwords(strtolower($user['name'] ?? ''))) ?>" id="currentProfileImage">
<?php else: ?>
<div class="default-profile-image" id="defaultProfileImage"><?= substr(htmlspecialchars(ucwords(strtolower($user['name'] ?? ''))), 0, 1) ?></div>
<?php endif; ?>
</div>
<div class="upload-controls">
<label for="profileImageUpload" class="upload-btn">
<i class="fas fa-camera"></i>
<?= !empty($user['profile_image']) ? 'Change Photo' : 'Upload Photo' ?>
</label>
<input type="file" id="profileImageUpload" accept="image/*" style="display: none;">
<?php if (!empty($user['profile_image'])): ?>
<button type="button" class="remove-btn" onclick="removeProfileImage()">
<i class="fas fa-trash"></i>
Remove
</button>
<?php endif; ?>
</div>
</div>
</div>
<div class="form-group">
<label class="form-label">Artist Name</label>
<input type="text" class="form-input" name="name" value="<?= htmlspecialchars(ucwords(strtolower($user['name'] ?? ''))) ?>" placeholder="Your artist name">
</div>
<!-- Genre Selection -->
<div class="form-group">
<label class="form-label">Music Genres</label>
<div class="genre-selection">
<?php
$userGenres = json_decode($user['genres'] ?? '[]', true);
$allGenres = ['House', 'Techno', 'Trance', 'Dubstep', 'Drum & Bass', 'Ambient', 'Chillout', 'Progressive', 'Electro', 'Hardstyle', 'Psytrance', 'Downtempo', 'Breaks', 'Garage', 'Jungle', 'IDM', 'Experimental', 'Synthwave', 'Future Bass', 'Trap'];
?>
<div class="genre-grid">
<?php foreach ($allGenres as $genre): ?>
<label class="genre-checkbox">
<input type="checkbox" name="genres[]" value="<?= htmlspecialchars($genre) ?>"
<?= in_array($genre, $userGenres) ? 'checked' : '' ?>>
<span class="genre-label"><?= htmlspecialchars($genre) ?></span>
</label>
<?php endforeach; ?>
</div>
</div>
</div>
<div class="form-group">
<label class="form-label">Music Style</label>
<textarea class="form-input" name="music_style" rows="3" placeholder="Describe your unique music style, what makes you special..."><?= htmlspecialchars($user['music_style'] ?? '') ?></textarea>
</div>
<div class="form-group">
<label class="form-label">Artist Highlights</label>
<div class="highlights-input">
<div class="highlight-inputs">
<?php
$highlights = json_decode($user['artist_highlights'] ?? '[]', true);
for ($i = 0; $i < 5; $i++):
?>
<input type="text" class="form-input highlight-input" name="artist_highlights[]"
value="<?= htmlspecialchars($highlights[$i] ?? '') ?>"
placeholder="Add a highlight (e.g., 'Featured on BBC Radio 1')">
<?php endfor; ?>
</div>
</div>
</div>
<div class="form-group">
<label class="form-label">Musical Influences</label>
<textarea class="form-input" name="influences" rows="3" placeholder="Who inspires your music? Artists, genres, life experiences..."><?= htmlspecialchars($user['influences'] ?? '') ?></textarea>
</div>
<div class="form-group">
<label class="form-label">Equipment & Setup</label>
<textarea class="form-input" name="equipment" rows="3" placeholder="What equipment do you use? Software, hardware, instruments..."><?= htmlspecialchars($user['equipment'] ?? '') ?></textarea>
</div>
<div class="form-group">
<label class="form-label">Achievements</label>
<div class="achievements-input">
<div class="achievement-inputs">
<?php
$achievements = json_decode($user['achievements'] ?? '[]', true);
for ($i = 0; $i < 5; $i++):
?>
<input type="text" class="form-input achievement-input" name="achievements[]"
value="<?= htmlspecialchars($achievements[$i] ?? '') ?>"
placeholder="Add an achievement (e.g., 'Top 10 on Beatport')">
<?php endfor; ?>
</div>
</div>
</div>
<div class="form-group">
<label class="form-label">Artist Statement</label>
<textarea class="form-input" name="artist_statement" rows="3" placeholder="Your personal mission statement as an artist..."><?= htmlspecialchars($user['artist_statement'] ?? '') ?></textarea>
</div>
<div class="form-group">
<label class="form-label">Bio</label>
<textarea class="form-input" name="bio" rows="4" placeholder="Tell us about your musical journey and spiritual inspiration..."><?= htmlspecialchars($user['bio'] ?? '') ?></textarea>
</div>
<div class="form-group">
<label class="form-label">Location</label>
<input type="text" class="form-input" name="location" value="<?= htmlspecialchars($user['location'] ?? '') ?>" placeholder="City, Country">
</div>
<div class="form-group">
<label class="form-label">Website</label>
<input type="url" class="form-input" name="website" value="<?= htmlspecialchars($user['website'] ?? '') ?>" placeholder="https://yourwebsite.com">
</div>
<div class="form-group">
<label class="form-label">Email</label>
<input type="email" class="form-input" name="email" value="<?= htmlspecialchars($user['email'] ?? '') ?>" placeholder="your@email.com">
</div>
<button type="submit" class="save-btn">
<i class="fas fa-save"></i>
Save Changes
</button>
</form>
</div>
</div>
<script>
// Initialize current theme
document.addEventListener('DOMContentLoaded', () => {
const currentTheme = localStorage.getItem('soundstudiopro_theme') || 'heavenly';
updateActiveTheme(currentTheme);
// Bind color scheme card clicks
document.querySelectorAll('.color-scheme-card').forEach(card => {
card.addEventListener('click', () => {
const theme = card.dataset.theme;
setThemeFromSettings(theme);
});
});
});
function updateActiveTheme(themeName) {
document.querySelectorAll('.color-scheme-card').forEach(card => {
card.classList.remove('active');
});
document.querySelector(`[data-theme="${themeName}"]`).classList.add('active');
}
function setThemeFromSettings(themeName) {
if (colorManager) {
colorManager.setTheme(themeName);
}
updateActiveTheme(themeName);
// Show success message
showNotification('Theme updated! Your divine color scheme has been applied.', 'success');
}
function randomizeFromSettings() {
if (colorManager) {
colorManager.randomizeTheme();
const newTheme = colorManager.currentTheme;
updateActiveTheme(newTheme);
showNotification('Divine inspiration has chosen your new theme!', 'success');
}
}
function showNotification(message, type = 'info') {
// Create notification element
const notification = document.createElement('div');
notification.style.cssText = `
position: fixed;
top: 100px;
right: 20px;
background: var(--bg-card);
color: var(--text-primary);
padding: 1.5rem 2rem;
border-radius: 12px;
box-shadow: var(--shadow-medium);
border: 2px solid var(--border-medium);
z-index: 10000;
font-size: 1.4rem;
font-weight: 500;
transform: translateX(100%);
transition: transform 0.3s ease;
`;
notification.textContent = message;
document.body.appendChild(notification);
// Animate in
setTimeout(() => {
notification.style.transform = 'translateX(0)';
}, 100);
// Remove after 3 seconds
setTimeout(() => {
notification.style.transform = 'translateX(100%)';
setTimeout(() => {
document.body.removeChild(notification);
}, 300);
}, 3000);
}
// Handle profile form submission
// Profile image upload functionality
const profileImageUpload = document.getElementById('profileImageUpload');
if (profileImageUpload) {
profileImageUpload.addEventListener('change', function(e) {
const file = e.target.files[0];
if (!file) return;
// Validate file type
if (!file.type.startsWith('image/')) {
showNotification('Please select a valid image file.', 'error');
return;
}
// Validate file size (5MB max)
if (file.size > 5 * 1024 * 1024) {
showNotification('File size must be less than 5MB.', 'error');
return;
}
uploadProfileImage(file);
});
}
function uploadProfileImage(file) {
const formData = new FormData();
formData.append('profile_image', file);
// Show loading state
const currentImage = document.getElementById('currentProfileImage');
const defaultImage = document.getElementById('defaultProfileImage');
const uploadBtn = document.querySelector('.upload-btn');
if (currentImage) {
currentImage.style.opacity = '0.5';
}
if (defaultImage) {
defaultImage.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
}
if (uploadBtn) {
uploadBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Uploading...';
uploadBtn.disabled = true;
}
fetch('/api/upload_profile_image.php', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
if (data.success) {
updateProfileImageDisplay(data.image_url);
showNotification('Profile image uploaded successfully!', 'success');
} else {
showNotification('Error uploading image: ' + (data.error || 'Unknown error'), 'error');
restoreOriginalState();
}
})
.catch(error => {
console.error('Error:', error);
showNotification('Error uploading image. Please try again.', 'error');
restoreOriginalState();
});
}
function updateProfileImageDisplay(imageUrl) {
const currentImage = document.getElementById('currentProfileImage');
const defaultImage = document.getElementById('defaultProfileImage');
const uploadBtn = document.querySelector('.upload-btn');
const removeBtn = document.querySelector('.remove-btn');
if (currentImage) {
currentImage.src = imageUrl;
currentImage.style.opacity = '1';
} else if (defaultImage) {
// Replace default image with actual image
defaultImage.outerHTML = `<img src="${imageUrl}" alt="Profile" id="currentProfileImage">`;
}
if (uploadBtn) {
uploadBtn.innerHTML = '<i class="fas fa-camera"></i> Change Photo';
uploadBtn.disabled = false;
}
// Add remove button if it doesn't exist
if (!removeBtn) {
const uploadControls = document.querySelector('.upload-controls');
const newRemoveBtn = document.createElement('button');
newRemoveBtn.type = 'button';
newRemoveBtn.className = 'remove-btn';
newRemoveBtn.onclick = removeProfileImage;
newRemoveBtn.innerHTML = '<i class="fas fa-trash"></i> Remove';
uploadControls.appendChild(newRemoveBtn);
}
}
function removeProfileImage() {
if (confirm('Are you sure you want to remove your profile image?')) {
fetch('/api/update_profile.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: document.querySelector('input[name="name"]').value,
email: document.querySelector('input[name="email"]').value,
bio: document.querySelector('textarea[name="bio"]').value,
location: document.querySelector('input[name="location"]').value,
website: document.querySelector('input[name="website"]').value,
profile_image: ''
})
})
.then(response => response.json())
.then(data => {
if (data.success) {
const currentImage = document.getElementById('currentProfileImage');
const defaultImage = document.getElementById('defaultProfileImage');
const removeBtn = document.querySelector('.remove-btn');
const uploadBtn = document.querySelector('.upload-btn');
const userName = document.querySelector('input[name="name"]').value;
if (currentImage) {
currentImage.outerHTML = `<div class="default-profile-image" id="defaultProfileImage">${userName.charAt(0).toUpperCase()}</div>`;
}
if (removeBtn) {
removeBtn.remove();
}
if (uploadBtn) {
uploadBtn.innerHTML = '<i class="fas fa-camera"></i> Upload Photo';
}
showNotification('Profile image removed successfully!', 'success');
} else {
showNotification('Error removing image: ' + (data.error || 'Unknown error'), 'error');
}
})
.catch(error => {
console.error('Error:', error);
showNotification('Error removing image. Please try again.', 'error');
});
}
}
function restoreOriginalState() {
const currentImage = document.getElementById('currentProfileImage');
const defaultImage = document.getElementById('defaultProfileImage');
const uploadBtn = document.querySelector('.upload-btn');
const userName = document.querySelector('input[name="name"]').value;
if (currentImage) {
currentImage.style.opacity = '1';
}
if (defaultImage) {
defaultImage.innerHTML = userName.charAt(0).toUpperCase();
}
if (uploadBtn) {
uploadBtn.innerHTML = '<i class="fas fa-camera"></i> Change Photo';
uploadBtn.disabled = false;
}
}
document.getElementById('profileForm').addEventListener('submit', async (e) => {
e.preventDefault();
const formData = new FormData(e.target);
// Handle arrays properly
const data = {};
for (let [key, value] of formData.entries()) {
if (key.endsWith('[]')) {
const arrayKey = key.slice(0, -2);
if (!data[arrayKey]) {
data[arrayKey] = [];
}
if (value.trim()) {
data[arrayKey].push(value.trim());
}
} else {
data[key] = value;
}
}
try {
const response = await fetch('/api/update_profile.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data)
});
if (response.ok) {
showNotification('Profile updated successfully!', 'success');
} else {
showNotification('Error updating profile. Please try again.', 'error');
}
} catch (error) {
showNotification('Error updating profile. Please try again.', 'error');
}
});
</script>
<?php include 'includes/footer.php'; ?>