fakhr-khaleej-blog
Version:
Moving and relocation services blog
160 lines (138 loc) • 5.01 kB
HTML
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>إعادة توليد الأيقونات</title>
<style>
body {
font-family: 'Arial', sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
text-align: center;
direction: rtl;
}
h1 {
color: #1a365d;
}
button {
background-color: #1a365d;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
margin: 20px 0;
}
button:hover {
background-color: #2a4365;
}
.icon-preview {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin-top: 30px;
}
.icon {
display: flex;
flex-direction: column;
align-items: center;
}
.icon img {
border: 1px solid #ddd;
border-radius: 8px;
background-color: #f9f9f9;
padding: 5px;
}
.icon p {
margin-top: 5px;
font-size: 14px;
}
</style>
</head>
<body>
<h1>أداة إعادة توليد أيقونات الموقع</h1>
<p>استخدم هذه الأداة لإعادة إنشاء أيقونات الموقع إذا كان هناك مشكلة في الأيقونات الحالية.</p>
<button id="regenerateBtn">إعادة توليد الأيقونات</button>
<div class="icon-preview" id="iconPreview"></div>
<script>
// Function to create a fallback icon
function createFallbackIcon(size) {
const canvas = document.createElement('canvas');
canvas.width = size;
canvas.height = size;
const ctx = canvas.getContext('2d');
// Background
ctx.fillStyle = '#051937';
ctx.fillRect(0, 0, size, size);
// Create a gradient for the center
const gradient = ctx.createRadialGradient(size/2, size/2, 0, size/2, size/2, size/2);
gradient.addColorStop(0, '#00C6FB');
gradient.addColorStop(1, '#005BEA');
// Draw a circle
ctx.beginPath();
ctx.arc(size/2, size/2, size/2 - 10, 0, Math.PI * 2);
ctx.fillStyle = gradient;
ctx.fill();
// Add text if size is big enough
if (size >= 72) {
ctx.fillStyle = 'white';
const fontSize = Math.max(size/4, 12);
ctx.font = `bold ${fontSize}px Arial`;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
if (size >= 144) {
ctx.fillText('فخر', size/2, size/2 - fontSize/2);
ctx.fillText('الخليج', size/2, size/2 + fontSize/2);
} else {
ctx.fillText('FK', size/2, size/2);
}
}
return canvas.toDataURL('image/png');
}
// Function to download an image as a file
function downloadIcon(dataUrl, filename) {
const link = document.createElement('a');
link.href = dataUrl;
link.download = filename;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
// Function to regenerate all icons
function regenerateIcons() {
console.log('Regenerating icons...');
const sizes = [16, 32, 72, 96, 128, 144, 152, 192, 384, 512];
const iconPreview = document.getElementById('iconPreview');
iconPreview.innerHTML = '';
sizes.forEach(size => {
const dataUrl = createFallbackIcon(size);
// Create a preview
const iconContainer = document.createElement('div');
iconContainer.className = 'icon';
const iconImg = document.createElement('img');
iconImg.src = dataUrl;
iconImg.width = Math.min(size, 150);
iconImg.height = Math.min(size, 150);
const iconText = document.createElement('p');
iconText.textContent = `${size}x${size}`;
const downloadBtn = document.createElement('button');
downloadBtn.textContent = 'تنزيل';
downloadBtn.onclick = () => downloadIcon(dataUrl, `icon-${size}x${size}.png`);
iconContainer.appendChild(iconImg);
iconContainer.appendChild(iconText);
iconContainer.appendChild(downloadBtn);
iconPreview.appendChild(iconContainer);
// Also generate with underscore for compatibility
downloadIcon(dataUrl, `icon_${size}x${size}.png`);
});
alert('تم إنشاء الأيقونات! انقر على زر "تنزيل" لكل أيقونة وضعها في مجلد /public/icons/');
}
// Event listener for the regenerate button
document.getElementById('regenerateBtn').addEventListener('click', regenerateIcons);
</script>
</body>
</html>