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
192 lines
6.5 KiB
HTML
192 lines
6.5 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 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> |