 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/ |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SoundStudioPro Logo Design</title>
<style>
body {
margin: 0;
padding: 20px;
background: #1a1a2e;
font-family: 'Arial', sans-serif;
color: white;
}
.logo-container {
width: 1200px;
height: 630px;
background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
border-radius: 20px;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.logo-main {
display: flex;
align-items: center;
gap: 0px;
z-index: 10;
}
.logo-icon {
width: 120px;
height: 120px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 25px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
}
.logo-icon::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(135deg, #667eea, #764ba2, #667eea);
border-radius: 27px;
z-index: -1;
opacity: 0.7;
}
.music-note {
font-size: 60px;
color: white;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.logo-text {
display: flex;
flex-direction: column;
gap: 10px;
}
.brand-name {
font-size: 72px;
font-weight: 800;
color: white;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
letter-spacing: -2px;
}
.tagline {
font-size: 28px;
color: #a0aec0;
font-weight: 400;
letter-spacing: 1px;
}
.waveform {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 200px;
display: flex;
align-items: flex-end;
justify-content: center;
gap: 4px;
opacity: 0.3;
}
.wave-bar {
background: linear-gradient(to top, #667eea, #764ba2);
border-radius: 2px;
animation: wave 2s ease-in-out infinite;
}
.wave-bar:nth-child(1) { height: 60px; animation-delay: 0s; }
.wave-bar:nth-child(2) { height: 80px; animation-delay: 0.1s; }
.wave-bar:nth-child(3) { height: 100px; animation-delay: 0.2s; }
.wave-bar:nth-child(4) { height: 120px; animation-delay: 0.3s; }
.wave-bar:nth-child(5) { height: 140px; animation-delay: 0.4s; }
.wave-bar:nth-child(6) { height: 160px; animation-delay: 0.5s; }
.wave-bar:nth-child(7) { height: 140px; animation-delay: 0.6s; }
.wave-bar:nth-child(8) { height: 120px; animation-delay: 0.7s; }
.wave-bar:nth-child(9) { height: 100px; animation-delay: 0.8s; }
.wave-bar:nth-child(10) { height: 80px; animation-delay: 0.9s; }
.wave-bar:nth-child(11) { height: 60px; animation-delay: 1s; }
@keyframes wave {
0%, 100% { transform: scaleY(1); }
50% { transform: scaleY(1.2); }
}
.particles {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
}
.particle {
position: absolute;
width: 4px;
height: 4px;
background: #667eea;
border-radius: 50%;
opacity: 0.6;
animation: float 6s ease-in-out infinite;
}
.particle:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
.particle:nth-child(2) { top: 30%; left: 80%; animation-delay: 1s; }
.particle:nth-child(3) { top: 60%; left: 20%; animation-delay: 2s; }
.particle:nth-child(4) { top: 70%; left: 70%; animation-delay: 3s; }
.particle:nth-child(5) { top: 40%; left: 50%; animation-delay: 4s; }
@keyframes float {
0%, 100% { transform: translateY(0px) scale(1); opacity: 0.6; }
50% { transform: translateY(-20px) scale(1.2); opacity: 1; }
}
.download-section {
margin-top: 30px;
text-align: center;
color: white;
}
.download-btn {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border: none;
padding: 15px 30px;
border-radius: 10px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
margin: 10px;
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
transition: all 0.3s ease;
}
.download-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}
.instructions {
background: rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 10px;
margin-top: 20px;
color: #a0aec0;
}
.instructions h3 {
color: white;
margin-top: 0;
}
.instructions ul {
text-align: left;
line-height: 1.6;
}
</style>
</head>
<body>
<div class="logo-container">
<div class="particles">
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
</div>
<div class="logo-main">
<div class="logo-icon">
<div class="music-note">🎵</div>
</div>
<div class="logo-text">
<div class="brand-name">SoundStudioPro</div>
<div class="tagline">AI Music Creation Platform</div>
</div>
</div>
<div class="waveform">
<div class="wave-bar"></div>
<div class="wave-bar"></div>
<div class="wave-bar"></div>
<div class="wave-bar"></div>
<div class="wave-bar"></div>
<div class="wave-bar"></div>
<div class="wave-bar"></div>
<div class="wave-bar"></div>
<div class="wave-bar"></div>
<div class="wave-bar"></div>
<div class="wave-bar"></div>
</div>
</div>
<div class="download-section">
<button class="download-btn" onclick="downloadLogo()">Download Logo (PNG)</button>
<button class="download-btn" onclick="downloadFavicon()">Download Favicon (ICO)</button>
<button class="download-btn" onclick="downloadSquare()">Download Square (1:1)</button>
<button class="download-btn" onclick="downloadFacebookProfile()">Download Facebook Profile (170x170)</button>
<button class="download-btn" onclick="downloadFacebookCover()">Download Facebook Cover (851x315)</button>
</div>
<div class="instructions">
<h3>📋 How to Use This Logo:</h3>
<ul>
<li><strong>OG Image:</strong> Use the main logo (1200x630px) for Facebook, Twitter, and other social media shares</li>
<li><strong>Favicon:</strong> Use the square version (32x32px) for your website's browser tab icon</li>
<li><strong>Social Media:</strong> Use the square version for profile pictures and avatars</li>
<li><strong>Email Signatures:</strong> Use the main logo for professional email signatures</li>
<li><strong>Business Cards:</strong> Use the main logo for printed materials</li>
</ul>
<h3>🔧 Technical Setup:</h3>
<ul>
<li>Add this to your HTML head: <code><meta property="og:image" content="your-logo-url.png"></code></li>
<li>Add favicon: <code><link rel="icon" type="image/x-icon" href="favicon.ico"></code></li>
<li>For Twitter: <code><meta name="twitter:image" content="your-logo-url.png"></code></li>
</ul>
</div>
<script>
function downloadLogo() {
const canvas = document.createElement('canvas');
canvas.width = 1200;
canvas.height = 630;
const ctx = canvas.getContext('2d');
// Background
const gradient = ctx.createLinearGradient(0, 0, 0, 630);
gradient.addColorStop(0, '#0f0f23');
gradient.addColorStop(0.5, '#1a1a2e');
gradient.addColorStop(1, '#16213e');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 1200, 630);
// Logo icon
const iconX = 420;
const iconY = 315;
const iconSize = 120;
// Icon background
const iconGradient = ctx.createRadialGradient(iconX, iconY, 0, iconX, iconY, iconSize/2);
iconGradient.addColorStop(0, '#667eea');
iconGradient.addColorStop(1, '#764ba2');
ctx.fillStyle = iconGradient;
// Rounded rectangle
const radius = 25;
const x = iconX - iconSize/2;
const y = iconY - iconSize/2;
const width = iconSize;
const height = iconSize;
ctx.beginPath();
ctx.moveTo(x + radius, y);
ctx.lineTo(x + width - radius, y);
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
ctx.lineTo(x + width, y + height - radius);
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
ctx.lineTo(x + radius, y + height);
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
ctx.lineTo(x, y + radius);
ctx.quadraticCurveTo(x, y, x + radius, y);
ctx.closePath();
ctx.fill();
// Music note (simple text)
ctx.fillStyle = 'white';
ctx.font = 'bold 60px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('♪', iconX, iconY);
// Brand name
ctx.font = 'bold 72px Arial';
ctx.fillStyle = 'white';
ctx.fillText('SoundStudioPro', 520, 350);
// Tagline
ctx.font = '28px Arial';
ctx.fillStyle = '#a0aec0';
ctx.fillText('AI Music Creation Platform', 520, 390);
// Waveform
const waveformY = 500;
const barWidth = 8;
const barGap = 4;
const bars = [60, 80, 100, 120, 140, 160, 140, 120, 100, 80, 60];
const totalWidth = bars.length * (barWidth + barGap) - barGap;
const startX = (1200 - totalWidth) / 2;
const barGradient = ctx.createLinearGradient(0, waveformY, 0, waveformY - 160);
barGradient.addColorStop(0, '#667eea');
barGradient.addColorStop(1, '#764ba2');
bars.forEach((height, index) => {
const x = startX + index * (barWidth + barGap);
ctx.fillStyle = barGradient;
ctx.fillRect(x, waveformY - height, barWidth, height);
});
// Download
const link = document.createElement('a');
link.download = 'soundstudiopro-logo.png';
link.href = canvas.toDataURL();
link.click();
}
function downloadFavicon() {
const canvas = document.createElement('canvas');
canvas.width = 32;
canvas.height = 32;
const ctx = canvas.getContext('2d');
// Background
const gradient = ctx.createLinearGradient(0, 0, 32, 32);
gradient.addColorStop(0, '#667eea');
gradient.addColorStop(1, '#764ba2');
ctx.fillStyle = gradient;
// Rounded rectangle
const radius = 6;
const size = 32;
ctx.beginPath();
ctx.moveTo(radius, 0);
ctx.lineTo(size - radius, 0);
ctx.quadraticCurveTo(size, 0, size, radius);
ctx.lineTo(size, size - radius);
ctx.quadraticCurveTo(size, size, size - radius, size);
ctx.lineTo(radius, size);
ctx.quadraticCurveTo(0, size, 0, size - radius);
ctx.lineTo(0, radius);
ctx.quadraticCurveTo(0, 0, radius, 0);
ctx.closePath();
ctx.fill();
// Music note
ctx.fillStyle = 'white';
ctx.font = 'bold 16px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('♪', 16, 16);
// Download
const link = document.createElement('a');
link.download = 'favicon.ico';
link.href = canvas.toDataURL();
link.click();
}
function downloadSquare() {
const canvas = document.createElement('canvas');
canvas.width = 800;
canvas.height = 800;
const ctx = canvas.getContext('2d');
// Background
const gradient = ctx.createLinearGradient(0, 0, 800, 800);
gradient.addColorStop(0, '#0f0f23');
gradient.addColorStop(0.5, '#1a1a2e');
gradient.addColorStop(1, '#16213e');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 800, 800);
// Logo icon
const iconX = 300;
const iconY = 400;
const iconSize = 150;
// Icon background
const iconGradient = ctx.createRadialGradient(iconX, iconY, 0, iconX, iconY, iconSize/2);
iconGradient.addColorStop(0, '#667eea');
iconGradient.addColorStop(1, '#764ba2');
ctx.fillStyle = iconGradient;
// Rounded rectangle
const radius = 30;
const x = iconX - iconSize/2;
const y = iconY - iconSize/2;
const width = iconSize;
const height = iconSize;
ctx.beginPath();
ctx.moveTo(x + radius, y);
ctx.lineTo(x + width - radius, y);
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
ctx.lineTo(x + width, y + height - radius);
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
ctx.lineTo(x + radius, y + height);
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
ctx.lineTo(x, y + radius);
ctx.quadraticCurveTo(x, y, x + radius, y);
ctx.closePath();
ctx.fill();
// Music note
ctx.fillStyle = 'white';
ctx.font = 'bold 80px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('♪', iconX, iconY);
// Brand name
ctx.font = 'bold 60px Arial';
ctx.fillStyle = 'white';
ctx.fillText('SoundStudioPro', 420, 400);
// Tagline
ctx.font = '24px Arial';
ctx.fillStyle = '#a0aec0';
ctx.fillText('AI Music Creation Platform', 420, 440);
// Download
const link = document.createElement('a');
link.download = 'soundstudiopro-square.png';
link.href = canvas.toDataURL();
link.click();
}
function downloadFacebookProfile() {
const canvas = document.createElement('canvas');
canvas.width = 170;
canvas.height = 170;
const ctx = canvas.getContext('2d');
// Background
const gradient = ctx.createLinearGradient(0, 0, 170, 170);
gradient.addColorStop(0, '#0f0f23');
gradient.addColorStop(0.5, '#1a1a2e');
gradient.addColorStop(1, '#16213e');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 170, 170);
// Logo icon (smaller for profile)
const iconX = 85;
const iconY = 85;
const iconSize = 60;
// Icon background
const iconGradient = ctx.createRadialGradient(iconX, iconY, 0, iconX, iconY, iconSize/2);
iconGradient.addColorStop(0, '#667eea');
iconGradient.addColorStop(1, '#764ba2');
ctx.fillStyle = iconGradient;
// Rounded rectangle
const radius = 12;
const x = iconX - iconSize/2;
const y = iconY - iconSize/2;
const width = iconSize;
const height = iconSize;
ctx.beginPath();
ctx.moveTo(x + radius, y);
ctx.lineTo(x + width - radius, y);
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
ctx.lineTo(x + width, y + height - radius);
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
ctx.lineTo(x + radius, y + height);
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
ctx.lineTo(x, y + radius);
ctx.quadraticCurveTo(x, y, x + radius, y);
ctx.closePath();
ctx.fill();
// Music note
ctx.fillStyle = 'white';
ctx.font = 'bold 30px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('♪', iconX, iconY);
// Download
const link = document.createElement('a');
link.download = 'soundstudiopro-facebook-profile.png';
link.href = canvas.toDataURL();
link.click();
}
function downloadFacebookCover() {
const canvas = document.createElement('canvas');
canvas.width = 851;
canvas.height = 315;
const ctx = canvas.getContext('2d');
// Background
const gradient = ctx.createLinearGradient(0, 0, 0, 315);
gradient.addColorStop(0, '#0f0f23');
gradient.addColorStop(0.5, '#1a1a2e');
gradient.addColorStop(1, '#16213e');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 851, 315);
// Logo icon
const iconX = 200;
const iconY = 157;
const iconSize = 80;
// Icon background
const iconGradient = ctx.createRadialGradient(iconX, iconY, 0, iconX, iconY, iconSize/2);
iconGradient.addColorStop(0, '#667eea');
iconGradient.addColorStop(1, '#764ba2');
ctx.fillStyle = iconGradient;
// Rounded rectangle
const radius = 16;
const x = iconX - iconSize/2;
const y = iconY - iconSize/2;
const width = iconSize;
const height = iconSize;
ctx.beginPath();
ctx.moveTo(x + radius, y);
ctx.lineTo(x + width - radius, y);
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
ctx.lineTo(x + width, y + height - radius);
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
ctx.lineTo(x + radius, y + height);
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
ctx.lineTo(x, y + radius);
ctx.quadraticCurveTo(x, y, x + radius, y);
ctx.closePath();
ctx.fill();
// Music note
ctx.fillStyle = 'white';
ctx.font = 'bold 40px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('♪', iconX, iconY);
// Brand name
ctx.font = 'bold 48px Arial';
ctx.fillStyle = 'white';
ctx.fillText('SoundStudioPro', 425, 157);
// Tagline
ctx.font = '20px Arial';
ctx.fillStyle = '#a0aec0';
ctx.fillText('AI Music Creation Platform', 425, 190);
// Download
const link = document.createElement('a');
link.download = 'soundstudiopro-facebook-cover.png';
link.href = canvas.toDataURL();
link.click();
}
</script>
</body>
</html>