У меня есть файл LCD.html c таким кодом: <!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>16-сегментный LCD Дисплей</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #000;
            color: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
        }

        input[type="text"] {
            padding: 10px;
            font-size: 16px;
            width: 300px;
            margin-bottom: 20px;
            background-color: #333;
            color: #fff;
            border: none;
            border-radius: 5px;
        }

        .lcd {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .character {
            width: 30px; /* Увеличен для визуализации */
            height: 40px; /* Увеличен для визуализации */
        }

        .on {
            fill: #fff; /* Цвет включенного сегмента */
        }
    </style>
</head>
<body>
    <input type="text" id="textInput" placeholder="Введите текст" oninput="updateLCD()">
    <div id="lcdDisplay" class="lcd"></div>

    <svg id="template" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.81 18.31" class="character" style="display:none">
        <path class="seg0" d="M5.77,7.79v-1.56s-.01-.09-.04-.13L2.87,2.03c-.04-.06-.11-.1-.19-.1h-.53c-.13,0-.23.1-.23.23v1.56s.01.09.04.13l2.86,4.08c.04.06.11.10.19.10h.53c.13,0,.23-.10,.23-.23Z"/>
        <path class="seg1" d="M8.27,8.02h.53c.07,0,.14-.04.19-.10l2.86-4.08s.04-.08.04-.13v-1.56c0-.13-.1-.23-.23-.23h-.53c-.07,0-.14.04-.19.10l-2.86,4.08s-.04.08-.04.13v1.56c0,.13.10.23.23.23Z"/>
        <path class="seg2" d="M8.04,10.52v1.56s.01.09.04.13l2.86,4.08c.04.06.11.10.19.10h.53c.13,0,.23-.10,.23-.23v-1.56s-.01-.09-.04-.13l-2.86-4.08c-.04-.06-.11-.10-.19-.10h-.53c-.13,0-.23.10-.23.23Z"/>
        <path class="seg3" d="M5.54,10.29h-.53c-.07,0-.14.04-.19.10l-2.86,4.08s-.04.08-.04.13v1.56c0,.13.10.23.23.23h.53c.07,0,.14-.04.19-.10l2.86-4.08s.04-.08.04-.13v-1.56c0-.13-.10-.23-.23-.23Z"/>
        <path class="seg4" d="M0,1.76c0,.55,0,5.52,0,7,0,.13.10.22.23.22h.4c.06,0,.12-.02.16-.07l.73-.73s.07-.10.07-.16V1.92c0-.06-.02-.12-.07-.16L0.39.63C.24.49,0,.59,0,.79v.97Z"/>
        <path class="seg5" d="M6.73.63V.23c0-.13-.10-.23-.23-.23H.79c-.2,0-.3.24-.16.39l1.14,1.14s.10.07.16.07h3.85c.06,0,.12-.02.16-.07l.73-.73s.07-.10.07-.16Z"/>
        <path class="seg6" d="M7.63,1.76l-.57-.57c-.09-.09-.23-.09-.32,0l-.57.57s-.07.10-.07.16v6.10c0,.06.02.12.07.16l.57.57c.09.09.23.09.32,0l.57-.57s.07-.10.07-.16V1.92c0-.06-.02-.12-.07-.16Z"/>
        <path class="seg7" d="M13.18,8.99h.4c.13,0,.23-.10.23-.23V.79c0-.20-.24-.30-.39-.16l-1.14,1.14s-.07.10-.07.16v6.10c0,.06.02.12.07.16l.73.73s.10.07.16.07Z"/>
        <path class="seg8" d="M12.05,1.52l1.14-1.14c.14-.14.04-.39-.16-.39h-5.72c-.13,0-.23.10-.23.23v.4c0,.06.02.12.07.16l.73.73s.10.07.16.07h2.68s.45,0,.45,0h.72c.06,0,.12-.02.16-.07Z"/>
        <path class="seg9" d="M13.81,17.52v-7.97c0-.13-.10-.23-.23-.23h-.4c-.06,0-.12.02-.16.07l-.73.73s-.07.10-.07.16v6.10c0,.06.02.12.07.16l.63.63.51.51c.14.14.39.04.39-.16Z"/>
        <path class="seg10" d="M7.07,17.68v.40c0,.13.10.23.23.23h5.72c.20,0,.30-.24.16-.39l-1.14-1.14s-.10-.07-.16-.07h-3.85c-.06,0-.12.02-.16.07l-.73.73s-.07.10-.07.16Z"/>
        <path class="seg11" d="M6.11,10.29v6.10c0,.06.02.12.07.16l.57.57c.09.09.23.09.32,0l.57-.57s.07-.10.07-.16v-6.10c0-.06-.02-.12-.07-.16l-.57-.57c-.09-.09-.23-.09-.32,0l-.57.57s-.07.10-.07.16Z"/>
        <path class="seg12" d="M.63,9.33H.23c-.13,0-.23.10-.23.23v7.17s0,.80,0,.80c0,.20.24.30.39.16l.46-.46.68-.68s.07-.10.07-.16v-6.10c0-.06-.02-.12-.07-.16l-.73-.73s-.10-.07-.16-.07Z"/>
        <path class="seg13" d="M1.76,16.79l-1.14,1.14c-.14.14-.04.39.16.39h5.72c.13,0,.23-.10.23-.23v-.40c0-.06-.02-.12-.07-.16l-.73-.73s-.10-.07-.16-.07h-2.78s.45,0,.45,0h-1.53c-.06,0-.12.02-.16.07Z"/>
        <path class="seg14" d="M1.76,8.43l-.57.57c-.09.09-.09.23,0,.32l.57.57s.10.07.16.07h3.85c.06,0,.12-.02.16-.07l.57-.57c.09-.09.09-.23,0-.32l-.57-.57s-.10-.07-.16-.07H1.92c-.06,0-.12.02-.16.07Z"/>
        <path class="seg15" d="M7.31,9.32l.57.57s.10.07.16.07h3.85c.06,0,.12-.02.16-.07l.57-.57c.09-.09.09-.23,0-.32l-.07-.07-.5-.5s-.10-.07-.16-.07h-3.85c-.06,0-.12.02-.16.07l-.57.57c-.09.09-.09.23,0,.32Z"/>
    </svg>

    <script>
        const charMap = {
            '0': [1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1],
            '1': [0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 0, 0, 1, 1],
            '2': [1, 1, 1, 0, 1, 1, 0, 0, 1, 1, 1, 0, 1, 0, 1, 1],
            '3': [1, 1, 1, 0, 0, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1],
            '4': [0, 0, 0, 1, 0, 0, 0, 1, 1, 1, 0, 1, 0, 1, 0, 1],
            '5': [1, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 1],
            '6': [0, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 0],
            '7': [1, 1, 1, 0, 0, 1, 0, 0, 1, 1, 0, 1, 0, 0, 1, 1],
            '8': [1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1],
            '9': [1, 1, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1],
            'A': [1, 1, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1, 0, 1, 0, 1],
            'B': [0, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 1, 1],
            'C': [1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 1, 1, 1, 0],
            'D': [0, 1, 0, 1, 0, 1, 0, 1, 1, 1, 0, 1, 1, 1, 1, 0],
            'E': [1, 0, 1, 0, 1, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1, 1],
            'F': [1, 0, 0, 0, 1, 1, 0, 0, 1, 0, 1, 1, 0, 1, 0, 1],
            'А': [1, 1, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1, 0, 1, 0, 1],
            'Б': [1, 1, 0, 0, 1, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1, 0],
        };

        function updateLCD() {
            const input = document.getElementById('textInput').value.toUpperCase();
            const display = document.getElementById('lcdDisplay');

            display.innerHTML = ''; // Очистка дисплея

            for (let char of input) {
                const template = document.getElementById('template').cloneNode(true);
                template.style.display = 'block';

                const segments = template.querySelectorAll('path');

                const map = charMap[char] || Array(16).fill(0);

                segments.forEach((segment, index) => {
                    if (map[index]) segment.classList.add('on');
                    else segment.classList.remove('on');
                });

                display.appendChild(template);
            }
        }
    </script>
</body>
</html>