[html]
<div style="max-width:700px;margin:10px auto;padding:15px;background:#fafafa;border:1px solid #ccc;border-radius:10px;">
<h2 style="text-align:center;">🎨 Онлайн-раскраска</h2>
<p style="font-size:13px;text-align:center;color:#555;">
Выберите цвет и кликните по элементу картинки, чтобы закрасить.
Администратор может загрузить собственную картинку (SVG-файл).
</p>
<!-- Панель управления -->
<div style="display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:10px;">
<input type="color" id="colorPicker" value="#ff6666" style="width:60px;height:40px;border:none;cursor:pointer;">
<button onclick="randomColor()" style="padding:6px 10px;">🎲 Случайный</button>
<button onclick="clearColors()" style="padding:6px 10px;">🧽 Очистить</button>
<button onclick="copySVG()" style="padding:6px 10px;">📋 Скопировать</button>
<button onclick="downloadSVG()" style="padding:6px 10px;">⬇️ Скачать</button>
<label style="cursor:pointer;padding:6px 10px;background:#eee;border-radius:5px;">
📁 Загрузить картинку
<input type="file" id="upload" accept=".svg" style="display:none;">
</label>
</div>
<!-- Область для SVG -->
<div id="coloringArea" style="border:1px dashed #bbb;background:#fff;padding:10px;text-align:center;">
<svg id="drawing" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300" width="100%" height="auto">
<rect width="400" height="300" fill="#fff"/>
<circle class="fillable" cx="100" cy="150" r="50" stroke="#000" fill="#fff"/>
<rect class="fillable" x="200" y="100" width="120" height="100" stroke="#000" fill="#fff" rx="10"/>
<polygon class="fillable" points="150,50 180,100 120,100" stroke="#000" fill="#fff"/>
<text x="100" y="280" text-anchor="middle" font-size="16" fill="#444">Пример изображения</text>
</svg>
</div>
</div>
<script>
(function() {
const svg = document.getElementById('drawing');
const picker = document.getElementById('colorPicker');
const upload = document.getElementById('upload');
let activeColor = picker.value;
// Клик по области
svg.addEventListener('click', (e) => {
if (e.target.classList.contains('fillable')) {
e.target.setAttribute('fill', activeColor);
}
});
// Выбор цвета
picker.addEventListener('input', (e) => activeColor = e.target.value);
// Случайный цвет
window.randomColor = function() {
const r = Math.floor(Math.random() * 256);
const g = Math.floor(Math.random() * 256);
const b = Math.floor(Math.random() * 256);
activeColor = `rgb(${r},${g},${b})`;
picker.value = rgbToHex(r,g,b);
};
function rgbToHex(r,g,b){
return "#" + [r,g,b].map(x=>{
const h=x.toString(16); return h.length===1?'0'+h:h;
}).join('');
}
// Очистить цвета
window.clearColors = function() {
svg.querySelectorAll('.fillable').forEach(el => el.setAttribute('fill','#fff'));
};
// Копировать SVG
window.copySVG = function() {
const text = new XMLSerializer().serializeToString(svg);
navigator.clipboard.writeText(text);
alert('SVG-код скопирован! Вставьте его в сообщение или сохраните как файл.');
};
// Скачать
window.downloadSVG = function() {
const text = new XMLSerializer().serializeToString(svg);
const blob = new Blob([text], {type:'image/svg+xml'});
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url; a.download = 'raskraska.svg';
a.click();
URL.revokeObjectURL(url);
};
// Загрузка SVG-файла
upload.addEventListener('change', (e) => {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = function(ev) {
document.getElementById('coloringArea').innerHTML = ev.target.result;
document.getElementById('coloringArea').querySelectorAll('.fillable').forEach(el => {
el.addEventListener('click', evt => {
evt.target.setAttribute('fill', activeColor);
});
});
};
reader.readAsText(file);
});
})();
</script>
[/html]