| Server IP : 167.235.67.158 / Your IP : 216.73.217.114 Web Server : Apache System : Linux ubuntu-8gb-nbg1-1 6.8.0-111-generic #111-Ubuntu SMP PREEMPT_DYNAMIC Sat Apr 11 23:16:02 UTC 2026 x86_64 User : root ( 0) PHP Version : 8.3.6 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : OFF Directory : /var/www/bc.the-word.com/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Generate 2026 Challenge Icons</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #0a0a1a;
color: #f8fafc;
min-height: 100vh;
padding: 40px;
}
h1 {
color: #8b5cf6;
margin-bottom: 20px;
}
p {
color: #94a3b8;
margin-bottom: 30px;
line-height: 1.6;
}
.icons-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 20px;
margin-bottom: 40px;
}
.icon-item {
background: #1a1a3a;
border-radius: 12px;
padding: 20px;
text-align: center;
}
.icon-item canvas {
display: block;
margin: 0 auto 15px;
border-radius: 12px;
}
.icon-item span {
display: block;
color: #94a3b8;
font-size: 14px;
margin-bottom: 10px;
}
.icon-item a {
display: inline-block;
background: #7c3aed;
color: white;
padding: 8px 16px;
border-radius: 8px;
text-decoration: none;
font-size: 14px;
transition: background 0.2s;
}
.icon-item a:hover {
background: #6d28d9;
}
.instructions {
background: #1a1a3a;
padding: 20px;
border-radius: 12px;
margin-top: 20px;
}
.instructions h2 {
color: #8b5cf6;
margin-bottom: 15px;
}
.instructions ol {
margin-left: 20px;
line-height: 2;
}
.btn-all {
background: #fbbf24;
color: #1a1a1a;
padding: 15px 30px;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
margin-bottom: 30px;
}
.btn-all:hover {
background: #f59e0b;
}
</style>
</head>
<body>
<h1>2026 Challenge App Icons Generator</h1>
<p>This page generates the PNG icons needed for the PWA. Click on each icon to download, or use the button below to download all at once.</p>
<button class="btn-all" onclick="downloadAll()">Download All Icons</button>
<div class="icons-grid" id="iconsGrid"></div>
<div class="instructions">
<h2>Instructions</h2>
<ol>
<li>Download all the icons using the button above</li>
<li>Place them in the <code>icons/</code> folder</li>
<li>The app will automatically use them for the home screen icon</li>
<li>On iPad: Open the app in Safari, tap Share, then "Add to Home Screen"</li>
</ol>
</div>
<script>
const sizes = [72, 96, 128, 144, 152, 180, 192, 384, 512];
function generateIcon(size) {
const canvas = document.createElement('canvas');
canvas.width = size;
canvas.height = size;
const ctx = canvas.getContext('2d');
// Background gradient
const bgGradient = ctx.createLinearGradient(0, 0, size, size);
bgGradient.addColorStop(0, '#0a0a1a');
bgGradient.addColorStop(0.5, '#1a1a3a');
bgGradient.addColorStop(1, '#0d0d2b');
// Rounded rectangle background
const radius = size * 0.15;
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.fillStyle = bgGradient;
ctx.fill();
// Draw stars
ctx.fillStyle = '#ffffff';
const starPositions = [
[0.1, 0.15], [0.25, 0.08], [0.8, 0.12], [0.9, 0.25],
[0.15, 0.85], [0.88, 0.8], [0.4, 0.9], [0.7, 0.95]
];
starPositions.forEach(([x, y]) => {
ctx.globalAlpha = Math.random() * 0.4 + 0.4;
ctx.beginPath();
ctx.arc(x * size, y * size, size * 0.006, 0, Math.PI * 2);
ctx.fill();
});
ctx.globalAlpha = 1;
// Tile gradient
const tileGradient = ctx.createLinearGradient(0, 0, size, size);
tileGradient.addColorStop(0, '#7c3aed');
tileGradient.addColorStop(1, '#4a2c82');
// Calculate pixel art dimensions
const padding = size * 0.12;
const availableWidth = size - padding * 2;
const tileSize = availableWidth / 16;
const gap = tileSize * 0.15;
const actualTileSize = tileSize - gap;
// Pixel art pattern for "2026"
const pattern = [
[1,1,1,0, 0,1,1,0, 1,1,1,0, 0,1,1],
[0,0,1,0, 1,0,0,1, 0,0,1,0, 1,0,0],
[0,1,0,0, 1,0,0,1, 0,1,0,0, 1,1,1],
[1,0,0,0, 1,0,0,1, 1,0,0,0, 1,0,1],
[1,1,1,0, 0,1,1,0, 1,1,1,0, 0,1,1]
];
// Draw pixel art
const startY = padding + (availableWidth - pattern.length * tileSize) / 2 + size * 0.05;
const startX = padding;
ctx.shadowColor = '#7c3aed';
ctx.shadowBlur = size * 0.02;
pattern.forEach((row, rowIndex) => {
row.forEach((pixel, colIndex) => {
if (pixel === 1) {
const x = startX + colIndex * tileSize;
const y = startY + rowIndex * tileSize;
ctx.fillStyle = tileGradient;
ctx.beginPath();
const r = actualTileSize * 0.15;
ctx.roundRect(x, y, actualTileSize, actualTileSize, r);
ctx.fill();
}
});
});
ctx.shadowBlur = 0;
return canvas;
}
function createDownloadLink(canvas, filename) {
const link = document.createElement('a');
link.download = filename;
link.href = canvas.toDataURL('image/png');
return link;
}
function init() {
const grid = document.getElementById('iconsGrid');
sizes.forEach(size => {
const canvas = generateIcon(size);
const container = document.createElement('div');
container.className = 'icon-item';
// Scale down for display
const displayCanvas = document.createElement('canvas');
const displaySize = Math.min(100, size);
displayCanvas.width = displaySize;
displayCanvas.height = displaySize;
const displayCtx = displayCanvas.getContext('2d');
displayCtx.drawImage(canvas, 0, 0, displaySize, displaySize);
const label = document.createElement('span');
label.textContent = `${size}x${size}`;
const link = createDownloadLink(canvas, `icon-${size}.png`);
link.textContent = 'Download';
container.appendChild(displayCanvas);
container.appendChild(label);
container.appendChild(link);
grid.appendChild(container);
});
// Also generate apple-touch-icon (180px)
const appleCanvas = generateIcon(180);
const appleContainer = document.createElement('div');
appleContainer.className = 'icon-item';
const appleDisplayCanvas = document.createElement('canvas');
appleDisplayCanvas.width = 100;
appleDisplayCanvas.height = 100;
const appleDisplayCtx = appleDisplayCanvas.getContext('2d');
appleDisplayCtx.drawImage(appleCanvas, 0, 0, 100, 100);
const appleLabel = document.createElement('span');
appleLabel.textContent = 'apple-touch-icon';
const appleLink = createDownloadLink(appleCanvas, 'apple-touch-icon.png');
appleLink.textContent = 'Download';
appleContainer.appendChild(appleDisplayCanvas);
appleContainer.appendChild(appleLabel);
appleContainer.appendChild(appleLink);
grid.appendChild(appleContainer);
}
async function downloadAll() {
const allSizes = [...sizes, 180];
for (const size of allSizes) {
const canvas = generateIcon(size);
const filename = size === 180 ? 'apple-touch-icon.png' : `icon-${size}.png`;
const link = createDownloadLink(canvas, filename);
link.click();
await new Promise(r => setTimeout(r, 200)); // Small delay between downloads
}
}
init();
</script>
</body>
</html>