http://veselkova-kramnicja.mozello.com/blog-tr/ Веселкова Крамниця - Блог ТР http://veselkova-kramnicja.mozello.com/blog-tr/params/post/4953363/tr-32 Sun, 27 Apr 2025 07:47:00 +0000 <meta charset="UTF-8"> <title>Веселкова Школа — Абетка</title> <style> body { font-family: Arial, sans-serif; background-color: #f0f8ff; padding: 20px; } h1 { text-align: center; color: #7b1fa2; } textarea { width: 100%; height: 150px; font-size: 1.2em; padding: 10px; margin-top: 10px; direction: ltr; } #output { margin-top: 20px; font-size: 1.5em; padding: 10px; background: #ffffff; border: 1px solid #ccc; min-height: 100px; white-space: normal; direction: ltr; display: flex; flex-wrap: wrap; align-items: flex-end; /* Вирівнювання по нижньому краю */ gap: 4px; } .letter-img { height: 40px; /* Встановлено розмір для малих літер */ vertical-align: bottom; /* Вирівнювання по нижньому краю */ display: inline-block; } .big-letter-img { height: 70px !important; /* Для великих літер */ } .missing-letter { color: #aaa; display: inline-block; } .controls { margin-top: 10px; } </style> <h1> <b><h1 style="font-weight: bold; font-style: normal;" class="moze-center">Ред<span style="font-weight: inherit; font-style: inherit">актор Веселкової Абетки</span></h1></b> <hr class="moze-more-divider"><p></p><br>Редактор Веселкової Абетки</h1> <p><img src="https://site-784543.mozfiles.com/files/784543/medium/TR_2.jpg" alt="TR_2.jpg"><br></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.toUpperCase() === char && char.toLowerCase() !== char) { img.classList.add('big-letter-img'); } output.appendChild(img); } else { const span = document.createElement('span'); span.textContent = char; span.className = letterMap[char] ? '' : 'missing-letter'; output.appendChild(span); } } } textarea.addEventListener('input', renderText); toggle.addEventListener('change', renderText); renderText(); </script> http://veselkova-kramnicja.mozello.com/blog-tr/params/post/4953357/tr-31 Sun, 27 Apr 2025 07:42:00 +0000 <meta charset="UTF-8"> <title>Веселкова Школа — Абетка</title> <style> body { font-family: Arial, sans-serif; background-color: #f0f8ff; padding: 20px; } h1 { text-align: center; color: #7b1fa2; } textarea { width: 100%; height: 150px; font-size: 1.2em; padding: 10px; margin-top: 10px; direction: ltr; } #output { margin-top: 20px; font-size: 1.5em; padding: 10px; background: #ffffff; border: 1px solid #ccc; min-height: 100px; white-space: normal; direction: ltr; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px; } .letter-img { height: auto; /* Дозволяємо зображенню адаптуватися */ max-height: 50px; /* Максимальна висота для малих літер */ vertical-align: bottom; display: inline-block; } .big-letter-img { height: 70px !important; /* Для великих літер */ } .missing-letter { color: #aaa; display: inline-block; } .controls { margin-top: 10px; } </style> <h1>Редактор Веселкової Абетки</h1> <p><img src="https://site-784543.mozfiles.com/files/784543/medium/TR_2.jpg" alt="TR_2.jpg"><br></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.toUpperCase() === char && char.toLowerCase() !== char) { img.classList.add('big-letter-img'); } output.appendChild(img); } else { const span = document.createElement('span'); span.textContent = char; span.className = letterMap[char] ? '' : 'missing-letter'; output.appendChild(span); } } } textarea.addEventListener('input', renderText); toggle.addEventListener('change', renderText); renderText(); </script> http://veselkova-kramnicja.mozello.com/blog-tr/params/post/4953343/tr30 Sun, 27 Apr 2025 07:29:00 +0000 <meta charset="UTF-8"> <title>Веселкова Школа — Абетка</title> <style> body { font-family: Arial, sans-serif; background-color: #f0f8ff; padding: 20px; } h1 { text-align: center; color: #7b1fa2; } textarea { width: 100%; height: 150px; font-size: 1.2em; padding: 10px; margin-top: 10px; direction: ltr; } #output { margin-top: 20px; font-size: 1.5em; padding: 10px; background: #ffffff; border: 1px solid #ccc; min-height: 100px; white-space: normal; direction: ltr; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px; } .letter-img { height: 40px; vertical-align: bottom; display: inline-block; } .big-letter-img { height: 70px !important; } .small-letter-img { height: 40px; /* Всі малі літери будуть однакового розміру */ } .missing-letter { color: #aaa; display: inline-block; } .controls { margin-top: 10px; } </style> <h1>Редактор Веселкової Абетки</h1> <p><img src="https://site-784543.mozfiles.com/files/784543/medium/TR_2.jpg" alt="TR_2.jpg"><br></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.toUpperCase() === char && char.toLowerCase() !== char) { img.classList.add('big-letter-img'); } else { img.classList.add('small-letter-img'); // Додаємо клас для малих літер } output.appendChild(img); } else { const span = document.createElement('span'); span.textContent = char; span.className = letterMap[char] ? '' : 'missing-letter'; output.appendChild(span); } } } textarea.addEventListener('input', renderText); toggle.addEventListener('change', renderText); renderText(); </script> http://veselkova-kramnicja.mozello.com/blog-tr/params/post/4953337/tr-29 Sun, 27 Apr 2025 07:25:00 +0000 <meta charset="UTF-8"> <title>Веселкова Школа — Абетка</title> <style> body { font-family: Arial, sans-serif; background-color: #f0f8ff; padding: 20px; } h1 { text-align: center; color: #7b1fa2; } textarea { width: 100%; height: 150px; font-size: 1.2em; padding: 10px; margin-top: 10px; direction: ltr; } #output { margin-top: 20px; font-size: 1.5em; padding: 10px; background: #ffffff; border: 1px solid #ccc; min-height: 100px; white-space: normal; direction: ltr; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px; } .letter-img { height: 40px; vertical-align: bottom; display: inline-block; } .big-letter-img { height: 70px !important; } .missing-letter { color: #aaa; display: inline-block; } .controls { margin-top: 10px; } </style> <h1>Редактор Веселкової Абетки</h1> <p><img src="https://site-784543.mozfiles.com/files/784543/medium/TR_2.jpg" alt="TR_2.jpg"><br></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', 'Ґ': '—', 'ґ': '—', // Потрібно додати зображення або залишити як placeholder 'Д': '—', 'д': '—', // Потрібно додати зображення або залишити як placeholder 'Е': 'E_eskavator.jpg', 'е': 'E_eskavator.jpg', 'Є': '—', 'є': '—', // Потрібно додати зображення або залишити як placeholder 'Ж': 'zh.jpg', 'ж': 'zh.jpg', 'З': 'Z-1.jpg', 'з': 'Z-1.jpg', 'И': 'i-1.jpg', 'и': 'i-1.jpg', 'І': '3.jpg', 'і': '3.jpg', 'Ї': '—', 'ї': '—', // Потрібно додати зображення або залишити як placeholder 'Й': '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', 'Ф': '—', 'ф': '—', // Потрібно додати зображення або залишити як placeholder 'Х': '—', 'х': '—', // Потрібно додати зображення або залишити як placeholder 'Ц': 'c.jpg', 'ц': 'c.jpg', 'Ч': 'ch.jpg', 'ч': 'ch.jpg', 'Ш': 'Sh.jpg', 'ш': 'Sh.jpg', 'Щ': '—', 'щ': '—', // Потрібно додати зображення або залишити як placeholder 'Ь': '—', 'ь': '—', // Потрібно додати зображення або залишити як placeholder 'Ю': '—', 'ю': '—', // Потрібно додати зображення або залишити як placeholder 'Я': '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.toUpperCase() === char && char.toLowerCase() !== char) { img.classList.add('big-letter-img'); } output.appendChild(img); } else { const span = document.createElement('span'); span.textContent = char; span.className = letterMap[char] ? '' : 'missing-letter'; output.appendChild(span); } } } textarea.addEventListener('input', renderText); toggle.addEventListener('change', renderText); renderText(); </script> http://veselkova-kramnicja.mozello.com/blog-tr/params/post/4953327/tr-28 Sun, 27 Apr 2025 07:13:00 +0000 <meta charset="UTF-8"> <title>Веселкова Школа — Абетка</title> <style> body { font-family: Arial, sans-serif; background-color: #f0f8ff; padding: 20px; } h1 { text-align: center; color: #7b1fa2; } textarea { width: 100%; height: 150px; font-size: 1.2em; padding: 10px; margin-top: 10px; direction: ltr; } #output { margin-top: 20px; font-size: 1.5em; padding: 10px; background: #ffffff; border: 1px solid #ccc; min-height: 100px; white-space: normal; direction: ltr; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px; } .letter-img { height: 40px; vertical-align: bottom; display: inline-block; } .big-letter-img { height: 70px !important; } .missing-letter { color: #aaa; display: inline-block; } .controls { margin-top: 10px; } </style> <h1>Редактор Веселкової Абетки</h1> <p><img src="https://site-784543.mozfiles.com/files/784543/medium/TR_2.jpg" alt="TR_2.jpg"><br></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', 'Ґ': '—', 'ґ': '—', // Потрібно додати зображення або залишити як placeholder 'Д': '—', 'д': '—', // Потрібно додати зображення або залишити як placeholder 'Е': 'E_eskavator.jpg', 'е': 'E_eskavator.jpg', 'Є': '—', 'є': '—', // Потрібно додати зображення або залишити як placeholder 'Ж': 'zh.jpg', 'ж': 'zh.jpg', 'З': 'Z-1.jpg', 'з': 'Z-1.jpg', 'И': 'i-1.jpg', 'и': 'i-1.jpg', 'І': '3.jpg', 'і': '3.jpg', 'Ї': '—', 'ї': '—', // Потрібно додати зображення або залишити як placeholder 'Й': 'J_jogurt.jpg', 'й': 'J_jogurt.jpg', 'К': 'k3.jpg', 'к': 'k3.jpg', 'Л': 'L_1.jpg', 'л': 'L_1.jpg', 'М': '—', 'м': '—', // Потрібно додати зображення або залишити як placeholder 'Н': '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', 'Ф': '—', 'ф': '—', // Потрібно додати зображення або залишити як placeholder 'Х': '—', 'х': '—', // Потрібно додати зображення або залишити як placeholder 'Ц': 'c.jpg', 'ц': 'c.jpg', 'Ч': 'ch.jpg', 'ч': 'ch.jpg', 'Ш': 'Sh.jpg', 'ш': 'Sh.jpg', 'Щ': '—', 'щ': '—', // Потрібно додати зображення або залишити як placeholder 'Ь': '—', 'ь': '—', // Потрібно додати зображення або залишити як placeholder 'Ю': '—', 'ю': '—', // Потрібно додати зображення або залишити як placeholder 'Я': '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.toUpperCase() === char && char.toLowerCase() !== char) { img.classList.add('big-letter-img'); } output.appendChild(img); } else { const span = document.createElement('span'); span.textContent = char; span.className = letterMap[char] ? '' : 'missing-letter'; output.appendChild(span); } } } textarea.addEventListener('input', renderText); toggle.addEventListener('change', renderText); renderText(); </script> http://veselkova-kramnicja.mozello.com/blog-tr/params/post/4953233/tr-27 Sun, 27 Apr 2025 06:04:00 +0000 <meta charset="UTF-8"> <title>Веселкова Абетка — Редактор</title> <style> body { font-family: Arial, sans-serif; background-color: #f0f8ff; padding: 20px; } h1 { text-align: center; color: #7b1fa2; } textarea { width: 100%; height: 150px; font-size: 1.2em; padding: 10px; margin-top: 10px; direction: ltr; } #output { margin-top: 20px; font-size: 1.5em; padding: 10px; background: #ffffff; border: 1px solid #ccc; min-height: 100px; white-space: normal; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px; } .letter-img { height: 40px; vertical-align: bottom; display: inline-block; } .big-letter-img { height: 70px !important; } .missing-letter { color: #aaa; display: inline-block; } .controls { margin-top: 10px; } </style> <h1>Редактор Веселкової Абетки</h1> <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 = { 'А': { file: 'A.jpg', title: 'Ангел' }, 'Б': { file: 'B.jpg', title: 'Бий барабан Барабанник' }, 'В': { file: 'V_velike.jpg', title: 'Ведмідь' }, 'Г': { file: 'g.jpg', title: 'потрібно знайти' }, 'Ґ': { file: '', title: 'потрібно знайти' }, 'Д': { file: '', title: 'потрібно знайти' }, 'Е': { file: 'E_eskavator.jpg', title: 'Екскаватор' }, 'Є': { file: '', title: 'потрібно знайти' }, 'Ж': { file: 'zh.jpg', title: 'потрібно знайти' }, 'З': { file: 'Z-1.jpg', title: 'потрібно знайти' }, 'И': { file: 'i.jpg', title: 'потрібно знайти' }, 'І': { file: 'indian.jpg', title: 'Індіанець' }, // Додано Індіанець для "І" 'Ї': { file: '', title: 'потрібно знайти' }, 'Й': { file: 'J_jogurt.jpg', title: 'Йогурт' }, 'К': { file: 'k3.jpg', title: 'Котик' }, 'Л': { file: 'L_1.jpg', title: 'Лисиця' }, 'М': { file: '', title: 'потрібно знайти' }, 'Н': { file: 'n.jpg', title: 'потрібно знайти' }, 'О': { file: 'O.jpg', title: 'Обруч' }, 'П': { file: 'p.jpg', title: 'потрібно знайти' }, 'Р': { file: 'r2.jpg', title: 'Рибка' }, 'С': { file: 'S.png', title: 'Сонце' }, 'Т': { file: 'T_3.jpg', title: 'Топірець' }, 'У': { file: '', title: 'потрібно знайти' }, 'Ф': { file: '', title: 'потрібно знайти' }, 'Х': { file: '', title: 'потрібно знайти' }, 'Ц': { file: 'c.jpg', title: 'потрібно знайти' }, 'Ч': { file: 'ch.jpg', title: 'потрібно знайти' }, 'Ш': { file: 'Sh.jpg', title: 'Шипшина' }, 'Щ': { file: '', title: 'потрібно знайти' }, 'Ь': { file: '', title: 'потрібно знайти' }, 'Ю': { file: '', title: 'потрібно знайти' }, 'Я': { file: 'Ja-1.jpg', title: 'потрібно знайти' }, // Низькі регістри 'а': { file: 'A.jpg', title: 'Ангел' }, 'б': { file: 'B.jpg', title: 'Бий барабан Барабанник' }, 'в': { file: 'V_velike.jpg', title: 'Ведмідь' }, 'г': { file: 'g.jpg', title: 'потрібно знайти' }, 'ґ': { file: '', title: 'потрібно знайти' }, 'д': { file: '', title: 'потрібно знайти' }, 'е': { file: 'E_eskavator.jpg', title: 'Екскаватор' }, 'є': { file: '', title: 'потрібно знайти' }, 'ж': { file: 'zh.jpg', title: 'потрібно знайти' }, 'з': { file: 'Z-1.jpg', title: 'потрібно знайти' }, 'и': { file: 'i.jpg', title: 'потрібно знайти' }, 'і': { file: 'indian.jpg', title: 'Індіанець' }, // Додано Індіанець для "і" 'ї': { file: '', title: 'потрібно знайти' }, 'й': { file: 'J_jogurt.jpg', title: 'Йогурт' }, 'к': { file: 'k3.jpg', title: 'Котик' }, 'л': { file: 'L_1.jpg', title: 'Лисиця' }, 'м': { file: '', title: 'потрібно знайти' }, 'н': { file: 'n.jpg', title: 'потрібно знайти' }, 'о': { file: 'O.jpg', title: 'Обруч' }, 'п': { file: 'p.jpg', title: 'потрібно знайти' }, 'р': { file: 'r2.jpg', title: 'Рибка' }, 'с': { file: 'S.png', title: 'Сонце' }, 'т': { file: 'T_3.jpg', title: 'Топірець' }, 'у': { file: '', title: 'потрібно знайти' }, 'ф': { file: '', title: 'потрібно знайти' }, 'х': { file: '', title: 'потрібно знайти' }, 'ц': { file: 'c.jpg', title: 'потрібно знайти' }, 'ч': { file: 'ch.jpg', title: 'потрібно знайти' }, 'ш': { file: 'Sh.jpg', title: 'Шипшина' }, 'щ': { file: '', title: 'потрібно знайти' }, 'ь': { file: '', title: 'потрібно знайти' }, 'ю': { file: '', title: 'потрібно знайти' }, 'я': { file: 'Ja-1.jpg', title: 'потрібно знайти' } }; 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) { const letter = letterMap[char]; if (char === '\n') { output.appendChild(document.createElement('br')); } else if (letter && useImages && letter.file) { const img = document.createElement('img'); img.src = baseUrl + letter.file; img.alt = char; img.title = letter.title || ''; img.className = 'letter-img'; if (char.toUpperCase() === char && char.toLowerCase() !== char) { img.classList.add('big-letter-img'); } output.appendChild(img); } else { const span = document.createElement('span'); span.textContent = char; span.className = (!letter || !letter.file) ? 'missing-letter' : ''; output.appendChild(span); } } } textarea.addEventListener('input', renderText); toggle.addEventListener('change', renderText); renderText(); </script> http://veselkova-kramnicja.mozello.com/blog-tr/params/post/4953227/tr-26 Sun, 27 Apr 2025 06:00:00 +0000 <meta charset="UTF-8"> <title>Веселкова Абетка — Редактор</title> <style> body { font-family: Arial, sans-serif; background-color: #f0f8ff; padding: 20px; } h1 { text-align: center; color: #7b1fa2; } textarea { width: 100%; height: 150px; font-size: 1.2em; padding: 10px; margin-top: 10px; direction: ltr; } #output { margin-top: 20px; font-size: 1.5em; padding: 10px; background: #ffffff; border: 1px solid #ccc; min-height: 100px; white-space: normal; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px; } .letter-img { height: 40px; vertical-align: bottom; display: inline-block; } .big-letter-img { height: 70px !important; } .missing-letter { color: #aaa; display: inline-block; } .controls { margin-top: 10px; } </style> <h1>Редактор Веселкової Абетки</h1> <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 = { 'А': { file: 'A.jpg', title: 'Ангел' }, 'Б': { file: 'B.jpg', title: 'Бий барабан Барабанник' }, 'В': { file: 'V_velike.jpg', title: 'Ведмідь' }, 'Г': { file: 'g.jpg', title: 'потрібно знайти' }, 'Ґ': { file: '', title: 'потрібно знайти' }, 'Д': { file: '', title: 'потрібно знайти' }, 'Е': { file: 'E_eskavator.jpg', title: 'Екскаватор' }, 'Є': { file: '', title: 'потрібно знайти' }, 'Ж': { file: 'zh.jpg', title: 'потрібно знайти' }, 'З': { file: 'Z-1.jpg', title: 'потрібно знайти' }, 'И': { file: 'i.jpg', title: 'потрібно знайти' }, 'І': { file: '', title: 'потрібно знайти' }, 'Ї': { file: '', title: 'потрібно знайти' }, 'Й': { file: 'J_jogurt.jpg', title: 'Йогурт' }, 'К': { file: 'k3.jpg', title: 'Котик' }, 'Л': { file: 'L_1.jpg', title: 'Лисиця' }, 'М': { file: '', title: 'потрібно знайти' }, 'Н': { file: 'n.jpg', title: 'потрібно знайти' }, 'О': { file: 'O.jpg', title: 'Обруч' }, 'П': { file: 'p.jpg', title: 'потрібно знайти' }, 'Р': { file: 'r2.jpg', title: 'Рибка' }, 'С': { file: 'S.png', title: 'Сонце' }, 'Т': { file: 'T_3.jpg', title: 'Топірець' }, 'У': { file: '', title: 'потрібно знайти' }, 'Ф': { file: '', title: 'потрібно знайти' }, 'Х': { file: '', title: 'потрібно знайти' }, 'Ц': { file: 'c.jpg', title: 'потрібно знайти' }, 'Ч': { file: 'ch.jpg', title: 'потрібно знайти' }, 'Ш': { file: 'Sh.jpg', title: 'Шипшина' }, 'Щ': { file: '', title: 'потрібно знайти' }, 'Ь': { file: '', title: 'потрібно знайти' }, 'Ю': { file: '', title: 'потрібно знайти' }, 'Я': { file: 'Ja-1.jpg', title: 'потрібно знайти' }, // Низькі регістри 'а': { file: 'A.jpg', title: 'Ангел' }, 'б': { file: 'B.jpg', title: 'Бий барабан Барабанник' }, 'в': { file: 'V_velike.jpg', title: 'Ведмідь' }, 'г': { file: 'g.jpg', title: 'потрібно знайти' }, 'ґ': { file: '', title: 'потрібно знайти' }, 'д': { file: '', title: 'потрібно знайти' }, 'е': { file: 'E_eskavator.jpg', title: 'Екскаватор' }, 'є': { file: '', title: 'потрібно знайти' }, 'ж': { file: 'zh.jpg', title: 'потрібно знайти' }, 'з': { file: 'Z-1.jpg', title: 'потрібно знайти' }, 'и': { file: 'i.jpg', title: 'потрібно знайти' }, 'і': { file: '', title: 'потрібно знайти' }, 'ї': { file: '', title: 'потрібно знайти' }, 'й': { file: 'J_jogurt.jpg', title: 'Йогурт' }, 'к': { file: 'k3.jpg', title: 'Котик' }, 'л': { file: 'L_1.jpg', title: 'Лисиця' }, 'м': { file: '', title: 'потрібно знайти' }, 'н': { file: 'n.jpg', title: 'потрібно знайти' }, 'о': { file: 'O.jpg', title: 'Обруч' }, 'п': { file: 'p.jpg', title: 'потрібно знайти' }, 'р': { file: 'r2.jpg', title: 'Рибка' }, 'с': { file: 'S.png', title: 'Сонце' }, 'т': { file: 'T_3.jpg', title: 'Топірець' }, 'у': { file: '', title: 'потрібно знайти' }, 'ф': { file: '', title: 'потрібно знайти' }, 'х': { file: '', title: 'потрібно знайти' }, 'ц': { file: 'c.jpg', title: 'потрібно знайти' }, 'ч': { file: 'ch.jpg', title: 'потрібно знайти' }, 'ш': { file: 'Sh.jpg', title: 'Шипшина' }, 'щ': { file: '', title: 'потрібно знайти' }, 'ь': { file: '', title: 'потрібно знайти' }, 'ю': { file: '', title: 'потрібно знайти' }, 'я': { file: 'Ja-1.jpg', title: 'потрібно знайти' } }; 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) { const letter = letterMap[char]; if (char === '\n') { output.appendChild(document.createElement('br')); } else if (letter && useImages && letter.file) { const img = document.createElement('img'); img.src = baseUrl + letter.file; img.alt = char; img.title = letter.title || ''; img.className = 'letter-img'; if (char.toUpperCase() === char && char.toLowerCase() !== char) { img.classList.add('big-letter-img'); } output.appendChild(img); } else { const span = document.createElement('span'); span.textContent = char; span.className = (!letter || !letter.file) ? 'missing-letter' : ''; output.appendChild(span); } } } textarea.addEventListener('input', renderText); toggle.addEventListener('change', renderText); renderText(); </script> http://veselkova-kramnicja.mozello.com/blog-tr/params/post/4953208/tr-25 Sun, 27 Apr 2025 05:52: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: #f8f8ff; padding: 20px; margin: 0; } h1 { text-align: center; color: #7b1fa2; } .editor-container { display: flex; flex-direction: column; align-items: center; } .editor { width: 80%; height: 300px; border: 1px solid #aaa; padding: 10px; font-size: 16px; line-height: 1.5; margin-bottom: 20px; resize: none; box-sizing: border-box; } .toolbar { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; } .toolbar button { padding: 10px; font-size: 16px; cursor: pointer; background-color: #e1bee7; border: none; border-radius: 5px; } .toolbar button:hover { background-color: #7b1fa2; color: white; } .instruction { text-align: center; font-size: 16px; color: #555; } </style> <h1>Текстовий Редактор — Абетка</h1> <div class="editor-container"> <div class="toolbar"> <button onclick="insertLetter('І')">Вставити І (індіанець)</button> <button onclick="insertLetter('А')">Вставити А (Ангел)</button> <button onclick="insertLetter('Б')">Вставити Б (Барабанник)</button> <!-- Додайте інші кнопки за потреби --> </div> <textarea class="editor" id="editor" placeholder="Пишіть тут..."></textarea> <div class="instruction"> <p>Використовуйте кнопки для вставки букв абетки з образами!</p> </div> </div> <script> // Функція для вставки букви в текстовий редактор function insertLetter(letter) { const editor = document.getElementById('editor'); const cursorPosition = editor.selectionStart; // Визначаємо місце курсору // Створюємо відповідний текст для букви let insertText = ''; switch (letter) { case 'І': insertText = 'І (індіанець) '; break; case 'А': insertText = 'А (Ангел) '; break; case 'Б': insertText = 'Б (Барабанник) '; break; // Додати інші випадки для інших букв } // Вставка тексту на поточну позицію const textBefore = editor.value.substring(0, cursorPosition); const textAfter = editor.value.substring(cursorPosition); editor.value = textBefore + insertText + textAfter; // Повертаємо курсор після вставленого тексту editor.selectionStart = editor.selectionEnd = cursorPosition + insertText.length; } </script> http://veselkova-kramnicja.mozello.com/blog-tr/params/post/4953168/tr-24 Sun, 27 Apr 2025 05:20:00 +0000 <meta charset="UTF-8"> <title>Веселкова Абетка — Редактор</title> <style> body { font-family: Arial, sans-serif; background-color: #f0f8ff; padding: 20px; } h1 { text-align: center; color: #7b1fa2; } textarea { width: 100%; height: 150px; font-size: 1.2em; padding: 10px; margin-top: 10px; direction: ltr; } #output { margin-top: 20px; font-size: 1.5em; padding: 10px; background: #ffffff; /* Змінено на білий фон */ border: 1px solid #ccc; min-height: 100px; white-space: normal; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px; } .letter-img { height: 40px; vertical-align: bottom; display: inline-block; } .big-letter-img { height: 70px !important; } .missing-letter { color: #aaa; display: inline-block; } .controls { margin-top: 10px; } </style> <h1>Редактор Веселкової Абетки</h1> <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 = { 'А': { file: 'A.jpg', title: 'Ангел' }, 'Б': { file: 'B.jpg', title: 'Бий барабан Барабанник' }, 'В': { file: 'V_velike.jpg', title: 'Ведмідь' }, 'Г': { file: 'g.jpg', title: 'потрібно знайти' }, 'Ґ': { file: '', title: 'потрібно знайти' }, 'Д': { file: '', title: 'потрібно знайти' }, 'Е': { file: 'E_eskavator.jpg', title: 'Екскаватор' }, 'Є': { file: '', title: 'потрібно знайти' }, 'Ж': { file: 'zh.jpg', title: 'потрібно знайти' }, 'З': { file: 'Z-1.jpg', title: 'потрібно знайти' }, 'И': { file: 'i.jpg', title: 'потрібно знайти' }, 'І': { file: '', title: 'потрібно знайти' }, // Додано 'Ї': { file: '', title: 'потрібно знайти' }, 'Й': { file: 'J_jogurt.jpg', title: 'Йогурт' }, 'К': { file: 'k3.jpg', title: 'Котик' }, 'Л': { file: 'L_1.jpg', title: 'Лисиця' }, 'М': { file: '', title: 'потрібно знайти' }, 'Н': { file: 'n.jpg', title: 'потрібно знайти' }, 'О': { file: 'O.jpg', title: 'Обруч' }, 'П': { file: 'p.jpg', title: 'потрібно знайти' }, 'Р': { file: 'r2.jpg', title: 'Рибка' }, 'С': { file: 'S.png', title: 'Сонце' }, 'Т': { file: 'T_3.jpg', title: 'Топірець' }, 'У': { file: '', title: 'потрібно знайти' }, 'Ф': { file: '', title: 'потрібно знайти' }, 'Х': { file: '', title: 'потрібно знайти' }, 'Ц': { file: 'c.jpg', title: 'потрібно знайти' }, 'Ч': { file: 'ch.jpg', title: 'потрібно знайти' }, 'Ш': { file: 'Sh.jpg', title: 'Шипшина' }, 'Щ': { file: '', title: 'потрібно знайти' }, 'Ь': { file: '', title: 'потрібно знайти' }, 'Ю': { file: '', title: 'потрібно знайти' }, 'Я': { file: 'Ja-1.jpg', title: 'потрібно знайти' }, // Низькі регістри 'а': { file: 'A.jpg', title: 'Ангел' }, 'б': { file: 'B.jpg', title: 'Бий барабан Барабанник' }, 'в': { file: 'V_velike.jpg', title: 'Ведмідь' }, 'г': { file: 'g.jpg', title: 'потрібно знайти' }, 'ґ': { file: '', title: 'потрібно знайти' }, 'д': { file: '', title: 'потрібно знайти' }, 'е': { file: 'E_eskavator.jpg', title: 'Екскаватор' }, 'є': { file: '', title: 'потрібно знайти' }, 'ж': { file: 'zh.jpg', title: 'потрібно знайти' }, 'з': { file: 'Z-1.jpg', title: 'потрібно знайти' }, 'и': { file: 'i.jpg', title: 'потрібно знайти' }, 'і': { file: '', title: 'потрібно знайти' }, // Додано 'ї': { file: '', title: 'потрібно знайти' }, 'й': { file: 'J_jogurt.jpg', title: 'Йогурт' }, 'к': { file: 'k3.jpg', title: 'Котик' }, 'л': { file: 'L_1.jpg', title: 'Лисиця' }, 'м': { file: '', title: 'потрібно знайти' }, 'н': { file: 'n.jpg', title: 'потрібно знайти' }, 'о': { file: 'O.jpg', title: 'Обруч' }, 'п': { file: 'p.jpg', title: 'потрібно знайти' }, 'р': { file: 'r2.jpg', title: 'Рибка' }, 'с': { file: 'S.png', title: 'Сонце' }, 'т': { file: 'T_3.jpg', title: 'Топірець' }, 'у': { file: '', title: 'потрібно знайти' }, 'ф': { file: '', title: 'потрібно знайти' }, 'х': { file: '', title: 'потрібно знайти' }, 'ц': { file: 'c.jpg', title: 'потрібно знайти' }, 'ч': { file: 'ch.jpg', title: 'потрібно знайти' }, 'ш': { file: 'Sh.jpg', title: 'Шипшина' }, 'щ': { file: '', title: 'потрібно знайти' }, 'ь': { file: '', title: 'потрібно знайти' }, 'ю': { file: '', title: 'потрібно знайти' }, 'я': { file: 'Ja-1.jpg', title: 'потрібно знайти' } }; 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) { const letter = letterMap[char]; if (char === '\n') { output.appendChild(document.createElement('br')); } else if (letter && useImages && letter.file) { const img = document.createElement('img'); img.src = baseUrl + letter.file; img.alt = char; img.title = letter.title || ''; img.className = 'letter-img'; if (char.toUpperCase() === char && char.toLowerCase() !== char) { img.classList.add('big-letter-img'); } output.appendChild(img); } else { const span = document.createElement('span'); span.textContent = char; span.className = (!letter || !letter.file) ? 'missing-letter' : ''; output.appendChild(span); } } } textarea.addEventListener('input', renderText); toggle.addEventListener('change', renderText); renderText(); </script> http://veselkova-kramnicja.mozello.com/blog-tr/params/post/4953151/tr-23 Sun, 27 Apr 2025 04:59:00 +0000 <meta charset="UTF-8"> <title>Веселкова Абетка — Редактор</title> <style> body { font-family: Arial, sans-serif; background-color: #f0f8ff; padding: 20px; } h1 { text-align: center; color: #7b1fa2; } textarea { width: 100%; height: 150px; font-size: 1.2em; padding: 10px; margin-top: 10px; direction: ltr; } #output { margin-top: 20px; font-size: 1.5em; padding: 10px; background: #ffffff; border: 1px solid #ccc; min-height: 100px; white-space: normal; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px; } .letter-img { height: 40px; vertical-align: bottom; display: inline-block; } .big-letter-img { height: 70px !important; } .missing-letter { color: #aaa; display: inline-block; } .controls { margin-top: 10px; } </style> <h1>Редактор Веселкової Абетки</h1> <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 = { 'А': { file: 'A.jpg', title: 'Ангел' }, 'Б': { file: 'B.jpg', title: 'Бий барабан Барабанник' }, 'В': { file: 'V_velike.jpg', title: 'Ведмідь' }, 'Г': { file: 'g.jpg', title: 'потрібно знайти' }, 'Ґ': { file: '', title: 'потрібно знайти' }, 'Д': { file: '', title: 'потрібно знайти' }, 'Е': { file: 'E_eskavator.jpg', title: 'Екскаватор' }, 'Є': { file: '', title: 'потрібно знайти' }, 'Ж': { file: 'zh.jpg', title: 'потрібно знайти' }, 'З': { file: 'Z-1.jpg', title: 'потрібно знайти' }, 'И': { file: 'i.jpg', title: 'потрібно знайти' }, 'І': { file: '', title: 'потрібно знайти' }, // Додано 'Ї': { file: '', title: 'потрібно знайти' }, 'Й': { file: 'J_jogurt.jpg', title: 'Йогурт' }, 'К': { file: 'k3.jpg', title: 'Котик' }, 'Л': { file: 'L_1.jpg', title: 'Лисиця' }, 'М': { file: '', title: 'потрібно знайти' }, 'Н': { file: 'n.jpg', title: 'потрібно знайти' }, 'О': { file: 'O.jpg', title: 'Обруч' }, 'П': { file: 'p.jpg', title: 'потрібно знайти' }, 'Р': { file: 'r2.jpg', title: 'Рибка' }, 'С': { file: 'S.png', title: 'Сонце' }, 'Т': { file: 'T_3.jpg', title: 'Топірець' }, 'У': { file: '', title: 'потрібно знайти' }, 'Ф': { file: '', title: 'потрібно знайти' }, 'Х': { file: '', title: 'потрібно знайти' }, 'Ц': { file: 'c.jpg', title: 'потрібно знайти' }, 'Ч': { file: 'ch.jpg', title: 'потрібно знайти' }, 'Ш': { file: 'Sh.jpg', title: 'Шипшина' }, 'Щ': { file: '', title: 'потрібно знайти' }, 'Ь': { file: '', title: 'потрібно знайти' }, 'Ю': { file: '', title: 'потрібно знайти' }, 'Я': { file: 'Ja-1.jpg', title: 'потрібно знайти' }, // Низькі регістри 'а': { file: 'A.jpg', title: 'Ангел' }, 'б': { file: 'B.jpg', title: 'Бий барабан Барабанник' }, 'в': { file: 'V_velike.jpg', title: 'Ведмідь' }, 'г': { file: 'g.jpg', title: 'потрібно знайти' }, 'ґ': { file: '', title: 'потрібно знайти' }, 'д': { file: '', title: 'потрібно знайти' }, 'е': { file: 'E_eskavator.jpg', title: 'Екскаватор' }, 'є': { file: '', title: 'потрібно знайти' }, 'ж': { file: 'zh.jpg', title: 'потрібно знайти' }, 'з': { file: 'Z-1.jpg', title: 'потрібно знайти' }, 'и': { file: 'i.jpg', title: 'потрібно знайти' }, 'і': { file: '', title: 'потрібно знайти' }, // Додано 'ї': { file: '', title: 'потрібно знайти' }, 'й': { file: 'J_jogurt.jpg', title: 'Йогурт' }, 'к': { file: 'k3.jpg', title: 'Котик' }, 'л': { file: 'L_1.jpg', title: 'Лисиця' }, 'м': { file: '', title: 'потрібно знайти' }, 'н': { file: 'n.jpg', title: 'потрібно знайти' }, 'о': { file: 'O.jpg', title: 'Обруч' }, 'п': { file: 'p.jpg', title: 'потрібно знайти' }, 'р': { file: 'r2.jpg', title: 'Рибка' }, 'с': { file: 'S.png', title: 'Сонце' }, 'т': { file: 'T_3.jpg', title: 'Топірець' }, 'у': { file: '', title: 'потрібно знайти' }, 'ф': { file: '', title: 'потрібно знайти' }, 'х': { file: '', title: 'потрібно знайти' }, 'ц': { file: 'c.jpg', title: 'потрібно знайти' }, 'ч': { file: 'ch.jpg', title: 'потрібно знайти' }, 'ш': { file: 'Sh.jpg', title: 'Шипшина' }, 'щ': { file: '', title: 'потрібно знайти' }, 'ь': { file: '', title: 'потрібно знайти' }, 'ю': { file: '', title: 'потрібно знайти' }, 'я': { file: 'Ja-1.jpg', title: 'потрібно знайти' } }; 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) { const letter = letterMap[char]; if (char === '\n') { output.appendChild(document.createElement('br')); } else if (letter && useImages && letter.file) { const img = document.createElement('img'); img.src = baseUrl + letter.file; img.alt = char; img.title = letter.title || ''; img.className = 'letter-img'; if (char.toUpperCase() === char && char.toLowerCase() !== char) { img.classList.add('big-letter-img'); } output.appendChild(img); } else { const span = document.createElement('span'); span.textContent = char; span.className = (!letter || !letter.file) ? 'missing-letter' : ''; output.appendChild(span); } } } textarea.addEventListener('input', renderText); toggle.addEventListener('change', renderText); renderText(); </script>