In the share image - Duration, Calories, Exercises, and Progress need to be centered inside their respective boxes along with the emoji. The progress completion ring needs to be lower, positioned under all the boxes. - Follow Up Deployment

index.html

@@ -288,73 +288,206 @@
             canvas.width = 1080;
             canvas.height = 1080;
             
-            // Draw gradient background
-            const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
-            gradient.addColorStop(0, '#1a1a2e');
+            // Draw dynamic gradient background
+            const gradient = ctx.createRadialGradient(
+                canvas.width/2, canvas.height/2, 0,
+                canvas.width/2, canvas.height/2, canvas.width
+            );
+            gradient.addColorStop(0, '#000000');
+            gradient.addColorStop(0.7, '#1a1a2e');
             gradient.addColorStop(1, '#16213e');
             ctx.fillStyle = gradient;
             ctx.fillRect(0, 0, canvas.width, canvas.height);
             
-            // Add gold decorative elements
-            ctx.fillStyle = 'rgba(212, 175, 55, 0.1)';
-            for (let i = 0; i < 5; i++) {
+            // Add energetic gold particles
+            ctx.fillStyle = 'rgba(212, 175, 55, 0.3)';
+            for (let i = 0; i < 150; i++) {
+                const size = Math.random() * 5 + 2;
+                const x = Math.random() * canvas.width;
+                const y = Math.random() * canvas.height;
                 ctx.beginPath();
-                ctx.arc(
-                    Math.random() * canvas.width,
-                    Math.random() * canvas.height,
-                    Math.random() * 100 + 50,
-                    0,
-                    Math.PI * 2
-                );
+                ctx.arc(x, y, size, 0, Math.PI * 2);
                 ctx.fill();
             }
             
-            // Add title with better typography
+            // Add glowing title effect (adjusted font size for better fit)
+            ctx.shadowColor = '#f9d423';
+            ctx.shadowBlur = 30;
             ctx.fillStyle = '#f9d423';
-            ctx.font = 'bold 72px "Arial", sans-serif';
+            ctx.font = 'bold 70px "Arial", sans-serif';
             ctx.textAlign = 'center';
             ctx.textBaseline = 'middle';
             
-            // Main title
-            ctx.fillText('WORKOUT COMPLETE', canvas.width/2, 150);
+            // Measure text width and adjust if needed
+            const titleText = '🔥 WORKOUT COMPLETE 🔥';
+            const maxTitleWidth = canvas.width - 100;
+            let titleFontSize = 70;
+            
+            // Scale down if too wide
+            while (ctx.measureText(titleText).width > maxTitleWidth && titleFontSize > 40) {
+                titleFontSize -= 2;
+                ctx.font = `bold ${titleFontSize}px "Arial", sans-serif`;
+            }
             
-            // Stats container
-            ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';
-            ctx.font = 'bold 42px "Arial", sans-serif';
+            ctx.fillText(titleText, canvas.width/2, 120);
+            ctx.shadowBlur = 0;
+            
+            // Add animated burst effect behind title
+            ctx.fillStyle = 'rgba(249, 212, 35, 0.2)';
+            for (let i = 0; i < 8; i++) {
+                const angle = (i / 8) * Math.PI * 2;
+                const length = 150;
+                const x1 = canvas.width/2;
+                const y1 = canvas.height/2 - 180;
+                const x2 = x1 + Math.cos(angle) * length;
+                const y2 = y1 + Math.sin(angle) * length;
+                
+                const gradient = ctx.createLinearGradient(x1, y1, x2, y2);
+                gradient.addColorStop(0, 'rgba(249, 212, 35, 0.3)');
+                gradient.addColorStop(1, 'rgba(249, 212, 35, 0)');
+                
+                ctx.fillStyle = gradient;
+                ctx.beginPath();
+                ctx.moveTo(x1, y1);
+                ctx.lineTo(x2, y2);
+                ctx.lineTo(x2 + Math.cos(angle + 0.2) * 20, y2 + Math.sin(angle + 0.2) * 20);
+                ctx.lineTo(x2 + Math.cos(angle - 0.2) * 20, y2 + Math.sin(angle - 0.2) * 20);
+                ctx.closePath();
+                ctx.fill();
+            }
             
-            // Stats with icons
+            // Stats container with perfectly fitted cards
             const stats = [
-                { icon: '⏱️', text: 'Duration: 45:22 (+2:18)' },
-                { icon: '🔥', text: 'Calories: 412 (New Record!)' },
-                { icon: '💪', text: 'Exercises: 8 (+1 new)' },
-                { icon: '📈', text: 'Weekly Progress: 3/5 (60%)' }
+                { icon: '⏱️', text: 'Duration', value: '45:22', change: '+2:18' },
+                { icon: '🔥', text: 'Calories', value: '412', change: 'Record!' },
+                { icon: '💪', text: 'Exercises', value: '8', change: '+1 new' },
+                { icon: '📈', text: 'Progress', value: '3/5', change: '60%' }
             ];
             
+            const cardWidth = 220; // Adjusted width for better fit
+            const cardHeight = 140; // Adjusted height for better fit
+            const cardPadding = 20;
+            const startX = (canvas.width - (cardWidth * 2 + 30)) / 2; // Centered with proper spacing
+            
             stats.forEach((stat, i) => {
-                const y = 300 + i * 100;
-                ctx.fillText(`${stat.icon}  ${stat.text}`, canvas.width/2, y);
+                const row = Math.floor(i / 2);
+                const col = i % 2;
+                const x = startX + col * (cardWidth + 40);
+                const y = 220 + row * (cardHeight + 20);
+                
+                // Card background
+                ctx.fillStyle = 'rgba(40, 40, 60, 0.8)';
+                ctx.beginPath();
+                ctx.roundRect(x, y, cardWidth, cardHeight, 20);
+                ctx.fill();
+                
+                // Gold border effect
+                ctx.strokeStyle = 'rgba(212, 175, 55, 0.5)';
+                ctx.lineWidth = 3;
+                ctx.beginPath();
+                ctx.roundRect(x, y, cardWidth, cardHeight, 20);
+                ctx.stroke();
+                
+                // Card content with perfect alignment
+                ctx.fillStyle = '#f9d423';
+                ctx.font = 'bold 28px "Arial", sans-serif';
+                const iconX = x + (cardWidth - ctx.measureText(stat.icon).width) / 2;
+                ctx.fillText(stat.icon, iconX, y + 40);
+                
+                // Stat label (centered)
+                ctx.fillStyle = '#ffffff';
+                ctx.font = 'bold 18px "Arial", sans-serif';
+                const maxTextWidth = cardWidth - 40;
+                let textSize = 18;
+                
+                // Ensure text fits perfectly
+                while (ctx.measureText(stat.text).width > maxTextWidth && textSize > 12) {
+                    textSize -= 1;
+                    ctx.font = `bold ${textSize}px "Arial", sans-serif`;
+                }
+                const labelX = x + (cardWidth - ctx.measureText(stat.text).width) / 2;
+                ctx.fillText(stat.text, labelX, y + 40);
+                
+                // Main value (centered)
+                ctx.fillStyle = '#f9d423';
+                ctx.font = 'bold 32px "Arial", sans-serif';
+                const valueX = x + (cardWidth - ctx.measureText(stat.value).width) / 2;
+                ctx.fillText(stat.value, valueX, y + 90);
+                
+                // Change indicator (centered below value)
+                ctx.fillStyle = '#4ade80';
+                ctx.font = 'bold 16px "Arial", sans-serif';
+                const changeText = stat.change.length > 10 ? stat.change.substring(0, 8) + '...' : stat.change;
+                const changeX = x + (cardWidth - ctx.measureText(changeText).width) / 2;
+                ctx.fillText(changeText, changeX, y + 120);
             });
             
-            // Progress bar
-            ctx.fillStyle = 'rgba(255, 255, 255, 0.2)';
-            ctx.fillRect(canvas.width/2 - 200, 700, 400, 30);
-            ctx.fillStyle = '#f9d423';
-            ctx.fillRect(canvas.width/2 - 200, 700, 400 * 0.6, 30);
+            // Circular progress chart
+            const progressX = canvas.width/2;
+            const progressY = 600;
+            const radius = 100;
+            const progress = 0.6; // 60%
             
-            // Motivational quote
-            ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
-            ctx.font = 'italic 32px "Arial", sans-serif';
-            ctx.fillText('"Strength grows in the moments', canvas.width/2, 800);
-            ctx.fillText('when you think you can\'t go on"', canvas.width/2, 850);
+            // Background circle
+            ctx.beginPath();
+            ctx.arc(progressX, progressY, radius, 0, Math.PI * 2);
+            ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)';
+            ctx.lineWidth = 20;
+            ctx.stroke();
             
-            // Logo and branding
-            ctx.fillStyle = '#f9d423';
+            // Progress arc
+            ctx.beginPath();
+            ctx.arc(progressX, progressY, radius, -Math.PI/2, -Math.PI/2 + Math.PI * 2 * progress);
+            ctx.strokeStyle = '#f9d423';
+            ctx.lineWidth = 20;
+            ctx.lineCap = 'round';
+            ctx.stroke();
+            
+            // Progress text
+            ctx.fillStyle = '#ffffff';
             ctx.font = 'bold 36px "Arial", sans-serif';
-            ctx.fillText('KINTSUGI FITNESS', canvas.width/2, 950);
+            ctx.fillText(`${Math.round(progress * 100)}%`, progressX, progressY);
+            
+            // Perfectly centered motivational text
+            ctx.shadowColor = '#f9d423';
+            ctx.shadowBlur = 15;
+            ctx.fillStyle = '#ffffff';
+            
+            const motivationalText = 'CRUSHED IT!';
+            let motivationalSize = 36;
+            ctx.font = `italic ${motivationalSize}px "Arial", sans-serif`;
             
-            ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
+            // Ensure perfect fit
+            while (ctx.measureText(motivationalText).width > canvas.width - 120 && motivationalSize > 24) {
+                motivationalSize -= 2;
+                ctx.font = `italic ${motivationalSize}px "Arial", sans-serif`;
+            }
+            
+            const motivationalY = 720; // Adjusted vertical position
+            ctx.fillText(motivationalText, canvas.width/2, motivationalY);
+            ctx.shadowBlur = 0;
+            
+            // Logo with gold gradient
+            const logoGradient = ctx.createLinearGradient(0, 800, 0, 880);
+            logoGradient.addColorStop(0, '#f9d423');
+            logoGradient.addColorStop(1, '#d4af37');
+            ctx.fillStyle = logoGradient;
+            ctx.font = 'bold 48px "Arial", sans-serif';
+            ctx.fillText('KINTSUGI', canvas.width/2, 850);
+            
+            ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
             ctx.font = '24px "Arial", sans-serif';
-            ctx.fillText('Your journey, beautifully imperfect', canvas.width/2, 1000);
+            ctx.fillText('Transform through movement', canvas.width/2, 900);
+            
+            // Add decorative gold elements
+            ctx.fillStyle = 'rgba(212, 175, 55, 0.1)';
+            ctx.beginPath();
+            ctx.ellipse(100, 200, 150, 60, Math.PI/4, 0, Math.PI * 2);
+            ctx.fill();
+            
+            ctx.beginPath();
+            ctx.ellipse(canvas.width - 100, canvas.height - 150, 120, 50, -Math.PI/4, 0, Math.PI * 2);
+            ctx.fill();
             
             // Convert canvas to image and download
             canvas.toBlob((blob) => {