133 lines
4.1 KiB
HTML
133 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Tasko Icon Generator</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
padding: 20px;
|
|
background: #f5f5f5;
|
|
}
|
|
.container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
padding: 30px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
}
|
|
h1 { color: #667eea; }
|
|
.instructions {
|
|
background: #f0f0f0;
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
margin: 20px 0;
|
|
}
|
|
canvas {
|
|
border: 2px solid #ddd;
|
|
margin: 10px;
|
|
border-radius: 8px;
|
|
}
|
|
button {
|
|
background: #667eea;
|
|
color: white;
|
|
border: none;
|
|
padding: 12px 24px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
margin-top: 20px;
|
|
}
|
|
button:hover {
|
|
background: #5568d3;
|
|
}
|
|
.icons-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: 20px;
|
|
margin-top: 20px;
|
|
}
|
|
.icon-item {
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>✓ Tasko Icon Generator</h1>
|
|
|
|
<div class="instructions">
|
|
<h3>Instructions:</h3>
|
|
<ol>
|
|
<li>Click "Generate Icons" button below</li>
|
|
<li>Right-click each icon and "Save image as..."</li>
|
|
<li>Save them in the <code>frontend/public/</code> folder with the exact names shown</li>
|
|
<li>Restart your dev server</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<button onclick="generateIcons()">Generate Icons</button>
|
|
|
|
<div class="icons-grid" id="iconsGrid"></div>
|
|
</div>
|
|
|
|
<script>
|
|
const sizes = [72, 96, 128, 144, 152, 192, 384, 512];
|
|
|
|
function generateIcons() {
|
|
const grid = document.getElementById('iconsGrid');
|
|
grid.innerHTML = '';
|
|
|
|
sizes.forEach(size => {
|
|
const canvas = document.createElement('canvas');
|
|
canvas.width = size;
|
|
canvas.height = size;
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
// Create gradient background
|
|
const gradient = ctx.createLinearGradient(0, 0, size, size);
|
|
gradient.addColorStop(0, '#667eea');
|
|
gradient.addColorStop(1, '#764ba2');
|
|
ctx.fillStyle = gradient;
|
|
ctx.fillRect(0, 0, size, size);
|
|
|
|
// Add rounded corners
|
|
ctx.globalCompositeOperation = 'destination-in';
|
|
ctx.beginPath();
|
|
ctx.roundRect(0, 0, size, size, size * 0.2);
|
|
ctx.fill();
|
|
ctx.globalCompositeOperation = 'source-over';
|
|
|
|
// Draw checkmark
|
|
ctx.strokeStyle = 'white';
|
|
ctx.lineWidth = size * 0.1;
|
|
ctx.lineCap = 'round';
|
|
ctx.lineJoin = 'round';
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(size * 0.25, size * 0.5);
|
|
ctx.lineTo(size * 0.4, size * 0.65);
|
|
ctx.lineTo(size * 0.75, size * 0.35);
|
|
ctx.stroke();
|
|
|
|
const item = document.createElement('div');
|
|
item.className = 'icon-item';
|
|
item.innerHTML = `
|
|
<canvas width="${size}" height="${size}" style="width: ${Math.min(size, 150)}px; height: ${Math.min(size, 150)}px;"></canvas>
|
|
<p><strong>${size}x${size}</strong></p>
|
|
<p><small>icon-${size}x${size}.png</small></p>
|
|
`;
|
|
|
|
const itemCanvas = item.querySelector('canvas');
|
|
itemCanvas.getContext('2d').drawImage(canvas, 0, 0);
|
|
|
|
grid.appendChild(item);
|
|
});
|
|
}
|
|
|
|
// Auto-generate on load
|
|
window.onload = generateIcons;
|
|
</script>
|
|
</body>
|
|
</html>
|