From 84d1c3eb798a83f8ab9315bcb20977c5411128b7 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 30 Aug 2025 21:57:43 +0000
Subject: [PATCH] Add tools to generate favicons and social media images

Adds two new HTML files: `generate-favicon.html` for creating favicons in various sizes, and `generate-social-image.html` for generating social media share images with predefined branding.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 051a65da-1176-4478-a61c-c662f2a15536
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/051a65da-1176-4478-a61c-c662f2a15536/9NQBiz8
---
 client/src/generate-favicon.html      | 192 ++++++++++++++++++++++++++
 client/src/generate-social-image.html | 135 ++++++++++++++++++
 2 files changed, 327 insertions(+)
 create mode 100644 client/src/generate-favicon.html
 create mode 100644 client/src/generate-social-image.html
diff --git a/client/src/generate-favicon.html b/client/src/generate-favicon.html
new file mode 100644
index 0000000..939cfc3
--- /dev/null
+++ b/client/src/generate-favicon.html
@@ -0,0 +1,192 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>go4.video Favicon Generator</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 20px;
+            font-family: Arial, sans-serif;
+            background: #000;
+            color: white;
+        }
+        
+        .canvas-container {
+            display: flex;
+            gap: 20px;
+            flex-wrap: wrap;
+            margin: 20px 0;
+        }
+        
+        .canvas-item {
+            text-align: center;
+        }
+        
+        canvas {
+            border: 1px solid #333;
+            background: white;
+        }
+        
+        button {
+            background: linear-gradient(135deg, #6366f1, #8b5cf6);
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 8px;
+            cursor: pointer;
+            margin: 5px;
+        }
+        
+        button:hover {
+            opacity: 0.8;
+        }
+        
+        .controls {
+            margin: 20px 0;
+        }
+    </style>
+</head>
+<body>
+    <h1>go4.video Favicon Generator</h1>
+    <p>Generate favicons in multiple sizes with your go4.video logo</p>
+    
+    <div class="controls">
+        <button onclick="generateAllFavicons()">Generate All Favicons</button>
+        <button onclick="downloadAll()">Download All</button>
+    </div>
+    
+    <div class="canvas-container">
+        <div class="canvas-item">
+            <h3>16x16 (Small)</h3>
+            <canvas id="favicon16" width="16" height="16"></canvas>
+            <br><button onclick="download('favicon16', '16x16')">Download</button>
+        </div>
+        
+        <div class="canvas-item">
+            <h3>32x32 (Standard)</h3>
+            <canvas id="favicon32" width="32" height="32"></canvas>
+            <br><button onclick="download('favicon32', '32x32')">Download</button>
+        </div>
+        
+        <div class="canvas-item">
+            <h3>48x48 (Large)</h3>
+            <canvas id="favicon48" width="48" height="48"></canvas>
+            <br><button onclick="download('favicon48', '48x48')">Download</button>
+        </div>
+        
+        <div class="canvas-item">
+            <h3>64x64 (Extra Large)</h3>
+            <canvas id="favicon64" width="64" height="64"></canvas>
+            <br><button onclick="download('favicon64', '64x64')">Download</button>
+        </div>
+        
+        <div class="canvas-item">
+            <h3>128x128 (HD)</h3>
+            <canvas id="favicon128" width="128" height="128"></canvas>
+            <br><button onclick="download('favicon128', '128x128')">Download</button>
+        </div>
+        
+        <div class="canvas-item">
+            <h3>256x256 (Retina)</h3>
+            <canvas id="favicon256" width="256" height="256"></canvas>
+            <br><button onclick="download('favicon256', '256x256')">Download</button>
+        </div>
+    </div>
+    
+    <div class="instructions">
+        <h3>How to use:</h3>
+        <ol>
+            <li>Click "Generate All Favicons" to create favicon versions</li>
+            <li>Download the sizes you need (typically 16x16, 32x32, and 48x48)</li>
+            <li>Rename the downloaded files to "favicon.ico" or use in your HTML</li>
+        </ol>
+    </div>
+    
+    <script>
+        function generateFavicon(canvasId, size) {
+            const canvas = document.getElementById(canvasId);
+            const ctx = canvas.getContext('2d');
+            
+            // Clear canvas
+            ctx.clearRect(0, 0, size, size);
+            
+            // White background
+            ctx.fillStyle = 'white';
+            ctx.fillRect(0, 0, size, size);
+            
+            // Calculate proportions based on size
+            const padding = Math.max(2, size * 0.1);
+            const logoSize = size - (padding * 2);
+            const cornerRadius = Math.max(2, size * 0.15);
+            
+            // Create gradient for logo background
+            const gradient = ctx.createLinearGradient(padding, padding, padding + logoSize, padding + logoSize);
+            gradient.addColorStop(0, '#6366f1');
+            gradient.addColorStop(1, '#8b5cf6');
+            
+            // Draw logo background (rounded rectangle)
+            ctx.fillStyle = gradient;
+            ctx.beginPath();
+            if (ctx.roundRect) {
+                ctx.roundRect(padding, padding, logoSize, logoSize, cornerRadius);
+            } else {
+                // Fallback for older browsers
+                ctx.rect(padding, padding, logoSize, logoSize);
+            }
+            ctx.fill();
+            
+            // Draw play triangle (white)
+            ctx.fillStyle = 'white';
+            ctx.beginPath();
+            
+            const triangleSize = logoSize * 0.4;
+            const centerX = padding + logoSize / 2;
+            const centerY = padding + logoSize / 2;
+            const offsetX = triangleSize * 0.15; // Slight offset to center visually
+            
+            ctx.moveTo(centerX - triangleSize/2 + offsetX, centerY - triangleSize/2);
+            ctx.lineTo(centerX - triangleSize/2 + offsetX, centerY + triangleSize/2);
+            ctx.lineTo(centerX + triangleSize/2 + offsetX, centerY);
+            ctx.closePath();
+            ctx.fill();
+        }
+        
+        function generateAllFavicons() {
+            const sizes = [16, 32, 48, 64, 128, 256];
+            sizes.forEach(size => {
+                generateFavicon(`favicon${size}`, size);
+            });
+        }
+        
+        function download(canvasId, sizeName) {
+            const canvas = document.getElementById(canvasId);
+            const link = document.createElement('a');
+            link.download = `go4-video-favicon-${sizeName}.png`;
+            link.href = canvas.toDataURL('image/png');
+            link.click();
+        }
+        
+        function downloadAll() {
+            const sizes = [
+                {id: 'favicon16', name: '16x16'},
+                {id: 'favicon32', name: '32x32'},
+                {id: 'favicon48', name: '48x48'},
+                {id: 'favicon64', name: '64x64'},
+                {id: 'favicon128', name: '128x128'},
+                {id: 'favicon256', name: '256x256'}
+            ];
+            
+            sizes.forEach((size, index) => {
+                setTimeout(() => {
+                    download(size.id, size.name);
+                }, index * 500); // Delay downloads to avoid browser blocking
+            });
+        }
+        
+        // Generate favicons on load
+        generateAllFavicons();
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/client/src/generate-social-image.html b/client/src/generate-social-image.html
new file mode 100644
index 0000000..ee42c08
--- /dev/null
+++ b/client/src/generate-social-image.html
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>go4.video Social Media Image Generator</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 20px;
+            font-family: Arial, sans-serif;
+            background: #000;
+            color: white;
+        }
+        
+        #canvas {
+            border: 1px solid #333;
+            background: linear-gradient(135deg, hsl(250, 50%, 15%) 0%, hsl(240, 30%, 25%) 100%);
+        }
+        
+        .controls {
+            margin-top: 20px;
+        }
+        
+        button {
+            background: linear-gradient(135deg, #6366f1, #8b5cf6);
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 8px;
+            cursor: pointer;
+            margin: 5px;
+        }
+        
+        button:hover {
+            opacity: 0.8;
+        }
+    </style>
+</head>
+<body>
+    <h1>go4.video Social Media Image Generator</h1>
+    <canvas id="canvas" width="1200" height="630"></canvas>
+    
+    <div class="controls">
+        <button onclick="generateImage()">Generate Social Image</button>
+        <button onclick="downloadImage()">Download Image</button>
+    </div>
+    
+    <script>
+        const canvas = document.getElementById('canvas');
+        const ctx = canvas.getContext('2d');
+        
+        function generateImage() {
+            // Clear canvas
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            
+            // Background gradient
+            const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
+            gradient.addColorStop(0, 'hsl(250, 50%, 15%)');
+            gradient.addColorStop(1, 'hsl(240, 30%, 25%)');
+            ctx.fillStyle = gradient;
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            
+            // Add geometric triangles
+            drawTriangle(100, 100, 80, '#6366f1', 0.1);
+            drawTriangle(1000, 200, 120, '#8b5cf6', 0.08);
+            drawTriangle(200, 450, 60, '#6366f1', 0.12);
+            drawTriangle(950, 500, 90, '#8b5cf6', 0.06);
+            
+            // Main logo area
+            drawPlayButton(300, 250, 60);
+            
+            // Main title
+            ctx.fillStyle = 'white';
+            ctx.font = 'bold 72px Arial, sans-serif';
+            ctx.textAlign = 'left';
+            ctx.fillText('go4.video', 400, 330);
+            
+            // Subtitle
+            ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
+            ctx.font = '32px Arial, sans-serif';
+            ctx.fillText('Professional Video Streaming Platform', 400, 380);
+            
+            // Bottom tagline
+            ctx.fillStyle = 'rgba(255, 255, 255, 0.6)';
+            ctx.font = '24px Arial, sans-serif';
+            ctx.fillText('Geschichte des Liedes • FOLX STADL • Premium Content', 400, 430);
+        }
+        
+        function drawPlayButton(x, y, size) {
+            // Main circle
+            const gradient = ctx.createLinearGradient(x, y, x + size, y + size);
+            gradient.addColorStop(0, '#6366f1');
+            gradient.addColorStop(1, '#8b5cf6');
+            
+            ctx.fillStyle = gradient;
+            ctx.beginPath();
+            ctx.roundRect(x, y, size, size, 15);
+            ctx.fill();
+            
+            // Play triangle
+            ctx.fillStyle = 'white';
+            ctx.beginPath();
+            ctx.moveTo(x + size * 0.35, y + size * 0.25);
+            ctx.lineTo(x + size * 0.35, y + size * 0.75);
+            ctx.lineTo(x + size * 0.7, y + size * 0.5);
+            ctx.closePath();
+            ctx.fill();
+        }
+        
+        function drawTriangle(x, y, size, color, opacity) {
+            ctx.save();
+            ctx.globalAlpha = opacity;
+            ctx.fillStyle = color;
+            ctx.beginPath();
+            ctx.moveTo(x, y);
+            ctx.lineTo(x + size, y + size * 0.8);
+            ctx.lineTo(x - size * 0.3, y + size);
+            ctx.closePath();
+            ctx.fill();
+            ctx.restore();
+        }
+        
+        function downloadImage() {
+            const link = document.createElement('a');
+            link.download = 'go4-video-social-share.png';
+            link.href = canvas.toDataURL('image/png');
+            link.click();
+        }
+        
+        // Generate image on load
+        generateImage();
+    </script>
+</body>
+</html>
\ No newline at end of file
