cec967f953
- Surse complete web (React/Vite) + mobil (React Native/Expo) + extensie (MV3) - Documentație de livrare: ghid utilizare, matrice trasabilitate cerințe, raport testare furnizor - Artefacte binare: imagine Docker didi-frontend:lot3-1.0, APK, extensie v3.2.6 + SHA256SUMS - Configurare adresă platformă externalizată (build args / .env / config.js) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
136 lines
3.6 KiB
HTML
136 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>DIDI Icon Generator</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
padding: 40px;
|
|
background: #1F2933;
|
|
color: white;
|
|
}
|
|
h1 { color: #00BFA6; }
|
|
.preview {
|
|
display: flex;
|
|
gap: 20px;
|
|
margin: 30px 0;
|
|
flex-wrap: wrap;
|
|
}
|
|
.icon-preview {
|
|
text-align: center;
|
|
background: #2D3748;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
}
|
|
canvas {
|
|
border: 2px solid #00BFA6;
|
|
border-radius: 4px;
|
|
background: white;
|
|
margin-bottom: 10px;
|
|
}
|
|
button {
|
|
background: linear-gradient(135deg, #0052CC 0%, #00BFA6 100%);
|
|
border: none;
|
|
padding: 12px 24px;
|
|
color: white;
|
|
font-weight: 600;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
margin-right: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
button:hover {
|
|
opacity: 0.9;
|
|
}
|
|
.instructions {
|
|
background: rgba(0, 191, 166, 0.1);
|
|
border: 1px solid #00BFA6;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
margin-top: 30px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🎨 DIDI Extension Icon Generator</h1>
|
|
<p>Click the buttons below to download icons for your Chrome extension.</p>
|
|
|
|
<div class="preview" id="preview"></div>
|
|
|
|
<div class="instructions">
|
|
<h3>📝 Instructions:</h3>
|
|
<ol>
|
|
<li>Click each "Download" button to save all 4 icon sizes</li>
|
|
<li>Save them in the <code>browser-extension</code> folder</li>
|
|
<li>The icons will be automatically used by the extension</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<script>
|
|
const sizes = [16, 32, 48, 128];
|
|
|
|
function createIcon(size) {
|
|
const canvas = document.createElement('canvas');
|
|
canvas.width = size;
|
|
canvas.height = size;
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
// Draw black background with rounded corners
|
|
const radius = Math.max(2, size / 8);
|
|
ctx.fillStyle = '#000000';
|
|
ctx.beginPath();
|
|
ctx.roundRect(0, 0, size, size, radius);
|
|
ctx.fill();
|
|
|
|
// Draw white 'd' letter
|
|
ctx.fillStyle = '#FFFFFF';
|
|
ctx.font = `700 ${size * 0.65}px Arial, sans-serif`;
|
|
ctx.textAlign = 'center';
|
|
ctx.textBaseline = 'middle';
|
|
ctx.fillText('d', size / 2, size / 2);
|
|
|
|
return canvas;
|
|
}
|
|
|
|
function downloadIcon(canvas, size) {
|
|
canvas.toBlob((blob) => {
|
|
const url = URL.createObjectURL(blob);
|
|
const link = document.createElement('a');
|
|
link.href = url;
|
|
link.download = `icon${size}.png`;
|
|
link.click();
|
|
URL.revokeObjectURL(url);
|
|
});
|
|
}
|
|
|
|
// Generate previews
|
|
const previewDiv = document.getElementById('preview');
|
|
|
|
sizes.forEach(size => {
|
|
const container = document.createElement('div');
|
|
container.className = 'icon-preview';
|
|
|
|
const canvas = createIcon(size);
|
|
container.appendChild(canvas);
|
|
|
|
const info = document.createElement('div');
|
|
info.innerHTML = `
|
|
<strong>${size}x${size}</strong><br>
|
|
<button onclick="downloadIcon(this.parentElement.parentElement.querySelector('canvas'), ${size})">
|
|
Download icon${size}.png
|
|
</button>
|
|
`;
|
|
container.appendChild(info);
|
|
|
|
previewDiv.appendChild(container);
|
|
});
|
|
|
|
// Helper function to download
|
|
window.downloadIcon = downloadIcon;
|
|
|
|
console.log('✅ DIDI Icon Generator loaded!');
|
|
console.log('📦 Generate all 4 icon sizes:', sizes);
|
|
</script>
|
|
</body>
|
|
</html>
|