http://gs-permakultura-v-ukran.mozello.com/kz-blog/ Пермакультура - кз Блог http://gs-permakultura-v-ukran.mozello.com/kz-blog/params/post/4958557/gkz-2 Wed, 30 Apr 2025 18:02:00 +0000 <meta charset="UTF-8"> <title>Куборедактор Зайцева</title> <style> body { font-family: sans-serif; display: flex; flex-direction: column; align-items: center; padding: 20px; background: #f9f9f9; } .controls { margin-bottom: 20px; } .controls label { margin-right: 10px; } .cube-net { display: grid; grid-template-columns: repeat(3, auto); grid-template-rows: repeat(4, auto); gap: 5px; margin-bottom: 20px; } .cell { width: 120px; height: 120px; border: 1px solid #ccc; display: flex; align-items: center; justify-content: center; background: white; position: relative; } .cell input { width: 90%; height: 70%; font-size: 20px; text-align: center; } .hidden { visibility: hidden; } canvas { border: 1px solid #000; margin-top: 20px; } </style> <h2>Куборедактор Зайцева</h2> <div class="controls"> <label>Розмір кубика: <select id="cubeSize"> <option value="5">5x5 см</option> <option value="6" selected="">6x6 см</option> </select> </label> <label>Фон: <select id="bgColor"> <option value="#ffffff">Білий</option> <option value="#fff176">Жовтий (голосні)</option> <option value="#cfd8dc">Сірий (дзвінкі)</option> <option value="#bcaaa4">Коричневий (глухі)</option> </select> </label> <button onclick="generateCube()">Створити розгортку</button> </div> <div class="cube-net"> <div class="cell hidden"></div> <div class="cell"><input id="face1" placeholder="Грань 1"></div> <div class="cell hidden"></div> <div class="cell"><input id="face2" placeholder="Грань 2"></div> <div class="cell"><input id="face3" placeholder="Грань 3"></div> <div class="cell"><input id="face4" placeholder="Грань 4"></div> <div class="cell hidden"></div> <div class="cell"><input id="face5" placeholder="Грань 5"></div> <div class="cell hidden"></div> <div class="cell hidden"></div> <div class="cell"><input id="face6" placeholder="Грань 6"></div> <div class="cell hidden"></div> </div> <canvas id="canvas" width="600" height="600"></canvas> <button onclick="saveImage()">Зберегти як PNG</button> <script> function generateCube() { const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const sizeCm = parseInt(document.getElementById('cubeSize').value); const cellSize = sizeCm * 10; // 10 px = 1 мм => 100 px = 1 см const bgColor = document.getElementById('bgColor').value; const faces = [ document.getElementById('face1').value, document.getElementById('face2').value, document.getElementById('face3').value, document.getElementById('face4').value, document.getElementById('face5').value, document.getElementById('face6').value ]; canvas.width = cellSize * 3 + 60; canvas.height = cellSize * 4 + 60; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.font = `${cellSize / 3}px sans-serif`; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; const offsetX = 30; const offsetY = 30; const positions = [ [offsetX + cellSize, offsetY], [offsetX, offsetY + cellSize], [offsetX + cellSize, offsetY + cellSize], [offsetX + 2 * cellSize, offsetY + cellSize], [offsetX + cellSize, offsetY + 2 * cellSize], [offsetX + cellSize, offsetY + 3 * cellSize] ]; for (let i = 0; i < 6; i++) { const [x, y] = positions[i]; ctx.fillStyle = bgColor; ctx.fillRect(x, y, cellSize, cellSize); ctx.strokeStyle = '#000'; ctx.setLineDash([5, 5]); ctx.strokeRect(x, y, cellSize, cellSize); ctx.setLineDash([]); ctx.fillStyle = '#000'; ctx.fillText(faces[i], x + cellSize / 2, y + cellSize / 2); } // Додаємо клапани drawFlap(ctx, positions[0][0], positions[0][1] - 15, cellSize, 'top'); // верхній клапан для face1 drawFlap(ctx, positions[1][0] - 15, positions[1][1], cellSize, 'left'); // лівий для face2 drawFlap(ctx, positions[3][0] + cellSize, positions[3][1], cellSize, 'right'); // правий для face4 drawFlap(ctx, positions[4][0], positions[4][1] + cellSize, cellSize, 'bottom'); // нижній для face5 drawFlap(ctx, positions[5][0], positions[5][1] + cellSize, cellSize, 'bottom'); // нижній для face6 } function drawFlap(ctx, x, y, size, side) { ctx.fillStyle = '#fff'; switch (side) { case 'top': ctx.fillRect(x, y, size, 15); ctx.strokeRect(x, y, size, 15); break; case 'bottom': ctx.fillRect(x, y, size, 15); ctx.strokeRect(x, y, size, 15); break; case 'left': ctx.fillRect(x, y, 15, size); ctx.strokeRect(x, y, 15, size); break; case 'right': ctx.fillRect(x, y, 15, size); ctx.strokeRect(x, y, 15, size); break; } } function saveImage() { const canvas = document.getElementById('canvas'); const link = document.createElement('a'); link.download = 'kubik.png'; link.href = canvas.toDataURL(); link.click(); } </script> http://gs-permakultura-v-ukran.mozello.com/kz-blog/params/post/4957736/gkz-1 Wed, 30 Apr 2025 08:13:00 +0000 оооооооооооооооооооооооооо<hr class="moze-more-divider"><p>ааааааааааааааааааааааа</p> <meta charset="UTF-8"> <title>Куборедактор Зайцева</title> <style> body { font-family: sans-serif; display: flex; flex-direction: column; align-items: center; padding: 20px; background: #f9f9f9; } .controls { margin-bottom: 20px; } .controls label { margin-right: 10px; } .cube-net { display: grid; grid-template-columns: repeat(4, auto); grid-template-rows: repeat(3, auto); gap: 5px; margin-bottom: 20px; } .cell { width: 120px; height: 120px; border: 1px solid #ccc; display: flex; align-items: center; justify-content: center; background: white; position: relative; } .cell input { width: 90%; height: 70%; font-size: 20px; text-align: center; } .hidden { visibility: hidden; } canvas { border: 1px solid #000; margin-top: 20px; } </style> <h2>Куборедактор Зайцева</h2> <div class="controls"> <label>Розмір кубика: <select id="cubeSize"> <option value="5">5x5 см</option> <option value="6" selected="">6x6 см</option> </select> </label> <label>Фон: <select id="bgColor"> <option value="#ffffff">Білий</option> <option value="#fff176">Жовтий (голосні)</option> <option value="#cfd8dc">Сірий (дзвінкі)</option> <option value="#bcaaa4">Коричневий (глухі)</option> </select> </label> <button onclick="generateCube()">Створити розгортку</button> </div> <div class="cube-net"> <div class="cell hidden"></div> <div class="cell"><input id="face1" placeholder="Грань 1"></div> <div class="cell hidden"></div> <div class="cell hidden"></div> <div class="cell"><input id="face2" placeholder="Грань 2"></div> <div class="cell"><input id="face3" placeholder="Грань 3"></div> <div class="cell"><input id="face4" placeholder="Грань 4"></div> <div class="cell"><input id="face5" placeholder="Грань 5"></div> <div class="cell hidden"></div> <div class="cell"><input id="face6" placeholder="Грань 6"></div> <div class="cell hidden"></div> </div> <canvas id="canvas" width="600" height="600"></canvas> <button onclick="saveImage()">Зберегти як PNG</button> <script> function generateCube() { const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const sizeCm = parseInt(document.getElementById('cubeSize').value); const cellSize = sizeCm * 10; // 10 px = 1 мм => 100 px = 1 см const bgColor = document.getElementById('bgColor').value; const faces = [ document.getElementById('face1').value, document.getElementById('face2').value, document.getElementById('face3').value, document.getElementById('face4').value, document.getElementById('face5').value, document.getElementById('face6').value ]; canvas.width = cellSize * 4 + 60; canvas.height = cellSize * 3 + 60; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.font = `${cellSize / 3}px sans-serif`; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; const offsetX = 30; const offsetY = 30; const positions = [ [offsetX + cellSize, offsetY], [offsetX, offsetY + cellSize], [offsetX + cellSize, offsetY + cellSize], [offsetX + 2 * cellSize, offsetY + cellSize], [offsetX + 3 * cellSize, offsetY + cellSize], [offsetX + cellSize, offsetY + 2 * cellSize] ]; for (let i = 0; i < 6; i++) { const [x, y] = positions[i]; // фон ctx.fillStyle = bgColor; ctx.fillRect(x, y, cellSize, cellSize); // пунктир рамка ctx.strokeStyle = '#000'; ctx.setLineDash([5, 5]); ctx.strokeRect(x, y, cellSize, cellSize); ctx.setLineDash([]); // текст ctx.fillStyle = '#000'; ctx.fillText(faces[i], x + cellSize / 2, y + cellSize / 2); // клапани для склеювання (приклад — зверху грані 1) if (i === 0) drawFlap(ctx, x, y - 15, cellSize, 'top'); if (i === 1) drawFlap(ctx, x - 15, y, cellSize, 'left'); if (i === 4) drawFlap(ctx, x + cellSize, y, cellSize, 'right'); if (i === 5) drawFlap(ctx, x, y + cellSize, cellSize, 'bottom'); } } function drawFlap(ctx, x, y, size, side) { ctx.fillStyle = '#fff'; switch (side) { case 'top': ctx.fillRect(x, y, size, 15); ctx.strokeRect(x, y, size, 15); break; case 'bottom': ctx.fillRect(x, y, size, 15); ctx.strokeRect(x, y, size, 15); break; case 'left': ctx.fillRect(x, y, 15, size); ctx.strokeRect(x, y, 15, size); break; case 'right': ctx.fillRect(x, y, 15, size); ctx.strokeRect(x, y, 15, size); break; } } function saveImage() { const canvas = document.getElementById('canvas'); const link = document.createElement('a'); link.download = 'kubik.png'; link.href = canvas.toDataURL(); link.click(); } </script> http://gs-permakultura-v-ukran.mozello.com/kz-blog/params/post/4956522/tr-32 Tue, 29 Apr 2025 13:00:00 +0000 <div><div>рррррррррррррр<hr class="moze-more-divider"><p>сссссссссссссссссссссссс</p></div></div> <meta charset="UTF-8"> <title>Веселкова Школа — Абетка</title> <style> body { font-family: Arial, sans-serif; background-color: #f0f8ff; padding: 20px; } h1 { text-align: center; color: #7b1fa2; font-weight: bold; } textarea { width: 100%; height: 150px; font-size: 1.2em; padding: 10px; margin-top: 10px; } #output { margin-top: 20px; font-size: 1.5em; padding: 10px; background: #ffffff; border: 1px solid #ccc; min-height: 100px; display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-end; } .letter-img { height: 40px; vertical-align: bottom; display: inline-block; animation: fadeIn 0.5s ease; } .big-letter-img { height: 70px !important; } .missing-letter { color: #555; display: inline-block; animation: fadeIn 0.5s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .controls { margin-top: 10px; } </style> <h1>Редактор Веселкової Абетки</h1> <hr> <p><img src="https://site-784543.mozfiles.com/files/784543/medium/TR_2.jpg" alt="TR_2.jpg"></p> <label for="text">Введіть текст:</label> <textarea id="text" placeholder="Напишіть щось...">Привіт, Алісо!</textarea> <div class="controls"> <label><input type="checkbox" id="toggleImages" checked=""> Показати зображення</label> </div> <div id="output"></div> <script> const letterMap = { 'А': 'A.jpg', 'а': 'A.jpg', 'Б': 'B.jpg', 'б': 'B.jpg', 'В': 'V_velike.jpg', 'в': 'V_velike.jpg', 'Г': 'g.jpg', 'г': 'g.jpg', 'Е': 'E_eskavator.jpg', 'е': 'E_eskavator.jpg', 'Ж': 'zh.jpg', 'ж': 'zh.jpg', 'З': 'Z-1.jpg', 'з': 'Z-1.jpg', 'И': 'i-1.jpg', 'и': 'i-1.jpg', 'І': '3.jpg', 'і': '3.jpg', 'Й': 'J_jogurt.jpg', 'й': 'J_jogurt.jpg', 'К': 'k3.jpg', 'к': 'k3.jpg', 'Л': 'L_1.jpg', 'л': 'L_1.jpg', 'М': 'm.jpg', 'м': 'm.jpg', 'Н': 'n.jpg', 'н': 'n.jpg', 'О': 'O.jpg', 'о': 'O.jpg', 'П': 'p.jpg', 'п': 'p.jpg', 'Р': 'r2.jpg', 'р': 'r2.jpg', 'С': 'S.png', 'с': 'S.png', 'Т': 'T_3.jpg', 'т': 'T_3.jpg', 'У': 'u.jpg', 'у': 'u.jpg', 'Ц': 'c.jpg', 'ц': 'c.jpg', 'Ч': 'ch.jpg', 'ч': 'ch.jpg', 'Ш': 'Sh.jpg', 'ш': 'Sh.jpg', 'Я': 'Ja-1.jpg', 'я': 'Ja-1.jpg' }; const baseUrl = 'https://site-784543.mozfiles.com/files/784543/'; const textarea = document.getElementById('text'); const output = document.getElementById('output'); const toggle = document.getElementById('toggleImages'); function renderText() { const text = textarea.value; const useImages = toggle.checked; output.innerHTML = ''; for (let char of text) { if (char === '\n') { output.appendChild(document.createElement('br')); } else if (letterMap[char] && useImages) { const img = document.createElement('img'); img.src = baseUrl + letterMap[char]; img.alt = char; img.className = 'letter-img'; if (char === char.toUpperCase() && char !== char.toLowerCase()) { img.classList.add('big-letter-img'); } output.appendChild(img); } else { const span = document.createElement('span'); span.textContent = char; span.className = 'missing-letter'; output.appendChild(span); } } } textarea.addEventListener('input', renderText); toggle.addEventListener('change', renderText); renderText(); </script> http://gs-permakultura-v-ukran.mozello.com/kz-blog/params/post/4956515/page Tue, 29 Apr 2025 12:48:00 +0000 <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Генератор Кубиків Зайцева</title> <style> body { font-family: Arial, sans-serif; background-color: #f0f8ff; padding: 20px; } h1 { text-align: center; color: #7b1fa2; } .grid-container { display: grid; grid-template-columns: repeat(6, 1fr); /* 6 колонок */ grid-gap: 10px; margin-top: 20px; } .grid-item { width: 80px; height: 80px; background-color: #fff; border: 1px solid #ccc; display: flex; justify-content: center; align-items: center; font-size: 1.5em; } .output-container { margin-top: 20px; display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 10px; } .output-item { width: 80px; height: 80px; background-color: #f3f3f3; border: 1px solid #ccc; display: flex; justify-content: center; align-items: center; } .controls { margin-top: 20px; text-align: center; } .toggle-input { margin: 10px 0; } .grid-container input { text-align: center; font-size: 1.2em; } </style> <h1>Генератор Кубиків Зайцева</h1> <div class="controls"> <label for="backgroundColor">Виберіть колір фону:</label> <input type="color" id="backgroundColor" class="toggle-input" value="#f3f3f3"> </div> <div class="grid-container" id="inputGrid"> <!-- Генерація інпутів для введення значень кубиків --> </div> <div class="controls"> <button id="generateBtn">Згенерувати Кубики</button> </div> <div class="output-container" id="outputGrid"> <!-- Результат буде тут --> </div> <script> const letterMap = { 'А': 'A.jpg', 'а': 'A.jpg', 'Б': 'B.jpg', 'б': 'B.jpg', 'В': 'V_velike.jpg', 'в': 'V_velike.jpg', 'Г': 'g.jpg', 'г': 'g.jpg', 'Ґ': '—', 'ґ': '—', 'Д': '—', 'д': '—', 'Е': 'E_eskavator.jpg', 'е': 'E_eskavator.jpg', 'Є': '—', 'є': '—', 'Ж': 'zh.jpg', 'ж': 'zh.jpg', 'З': 'Z-1.jpg', 'з': 'Z-1.jpg', 'И': 'i-1.jpg', 'и': 'i-1.jpg', 'І': '3.jpg', 'і': '3.jpg', 'Ї': '—', 'ї': '—', 'Й': 'J_jogurt.jpg', 'й': 'J_jogurt.jpg', 'К': 'k3.jpg', 'к': 'k3.jpg', 'Л': 'L_1.jpg', 'л': 'L_1.jpg', 'М': 'm.jpg', 'м': 'm.jpg', 'Н': 'n.jpg', 'н': 'n.jpg', 'О': 'O.jpg', 'о': 'O.jpg', 'П': 'p.jpg', 'п': 'p.jpg', 'Р': 'r2.jpg', 'р': 'r2.jpg', 'С': 'S.png', 'с': 'S.png', 'Т': 'T_3.jpg', 'т': 'T_3.jpg', 'У': 'u.jpg', 'у': 'u.jpg', 'Ф': '—', 'ф': '—', 'Х': '—', 'х': '—', 'Ц': 'c.jpg', 'ц': 'c.jpg', 'Ч': 'ch.jpg', 'ч': 'ch.jpg', 'Ш': 'Sh.jpg', 'ш': 'Sh.jpg', 'Щ': '—', 'щ': '—', 'Ь': '—', 'ь': '—', 'Ю': '—', 'ю': '—', 'Я': 'Ja-1.jpg', 'я': 'Ja-1.jpg' }; const baseUrl = 'https://site-784543.mozfiles.com/files/784543/'; const inputGrid = document.getElementById('inputGrid'); const outputGrid = document.getElementById('outputGrid'); const generateBtn = document.getElementById('generateBtn'); const backgroundColorInput = document.getElementById('backgroundColor'); // Генерація інпутів для введення значень function generateInputGrid() { for (let i = 0; i < 36; i++) { const input = document.createElement('input'); input.type = 'text'; input.placeholder = 'Літера'; input.className = 'grid-item'; inputGrid.appendChild(input); } } // Функція для генерації кубиків з введених значень function generateCubes() { outputGrid.innerHTML = ''; const inputs = document.querySelectorAll('#inputGrid input'); const backgroundColor = backgroundColorInput.value; inputs.forEach((input, index) => { const value = input.value.trim(); const cubeItem = document.createElement('div'); cubeItem.className = 'output-item'; cubeItem.style.backgroundColor = backgroundColor; if (letterMap[value]) { const img = document.createElement('img'); img.src = baseUrl + letterMap[value]; img.alt = value; img.style.width = '60px'; img.style.height = '60px'; cubeItem.appendChild(img); } else { cubeItem.textContent = value || '—'; } outputGrid.appendChild(cubeItem); }); } // Обробка кнопки генерування кубиків generateBtn.addEventListener('click', generateCubes); // Спочатку генеруємо інпут-форму для 6x6 generateInputGrid(); </script> http://gs-permakultura-v-ukran.mozello.com/kz-blog/params/post/4956446/ Tue, 29 Apr 2025 11:49:46 +0000 <p>Це демо-текст, щоб продемонструвати як буде виглядати повідомлення в блозі. Видаліть цей пост і додайте свої власні повідомлення.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> http://gs-permakultura-v-ukran.mozello.com/kz-blog/params/post/4956448/kuboredaktor-zajceva Tue, 29 Apr 2025 11:49:00 +0000 оооооооооооооооооооо <br> <hr class="moze-more-divider"> <p></p>пппппппппппппппппппп <br> <br> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Куборедактор</title> <style> body { font-family: sans-serif; display: flex; flex-direction: column; align-items: center; padding: 20px; } .cube-net { display: grid; grid-template-columns: repeat(4, 100px); grid-template-rows: repeat(3, 100px); gap: 5px; } .face { width: 100px; height: 100px; border: 1px solid #000; display: flex; align-items: center; justify-content: center; font-size: 24px; background-color: #fffacd; } .hidden { visibility: hidden; } .controls { margin-top: 20px; } input { width: 90px; font-size: 20px; text-align: center; } </style> <h2>Куборедактор Зайцева</h2> <div class="cube-net"> <div class="face hidden"></div> <div class="face"> <input maxlength="3" id="face1"> </div> <div class="face hidden"></div> <div class="face hidden"></div> <div class="face"> <input maxlength="3" id="face2"> </div> <div class="face"> <input maxlength="3" id="face3"> </div> <div class="face"> <input maxlength="3" id="face4"> </div> <div class="face"> <input maxlength="3" id="face5"> </div> <div class="face hidden"></div> <div class="face"> <input maxlength="3" id="face6"> </div> <div class="face hidden"></div> </div> <div class="controls"> <button onclick="generateImage()">Зберегти як зображення</button> </div> <canvas id="canvas" width="600" height="600" style="display:none;"></canvas> <script> function generateImage() { const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.fillStyle = '#fff'; ctx.fillRect(0, 0, 600, 600); ctx.strokeStyle = '#000'; ctx.lineWidth = 2; ctx.font = '32px sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; const faces = [ { x: 200, y: 0, id: 'face1' }, { x: 100, y: 100, id: 'face2' }, { x: 200, y: 100, id: 'face3' }, { x: 300, y: 100, id: 'face4' }, { x: 400, y: 100, id: 'face5' }, { x: 200, y: 200, id: 'face6' }, ]; faces.forEach(face => { ctx.strokeRect(face.x, face.y, 100, 100); const text = document.getElementById(face.id).value; ctx.fillStyle = '#fffacd'; ctx.fillRect(face.x, face.y, 100, 100); ctx.strokeRect(face.x, face.y, 100, 100); ctx.fillStyle = '#000'; ctx.fillText(text, face.x + 50, face.y + 50); }); const link = document.createElement('a'); link.download = 'kubik.png'; link.href = canvas.toDataURL(); link.click(); } </script>