84d1c3eb79
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
135 lines
4.4 KiB
HTML
135 lines
4.4 KiB
HTML
<!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> |