[html]
<div style="font-family: Arial, sans-serif; max-width: 800px; margin: 10px auto; padding: 15px; background: rgba(255, 255, 255, 0.15); border-radius: 8px; backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.2); box-sizing: border-box;">

    <div style="font-size: 10px; color: #777; text-transform: lowercase; margin-bottom: 8px; letter-spacing: 1px; padding-left: 2px;">
        получить готовый код
    </div>

    <div id="rows"></div>

    <textarea id="code"
        style="width: 100%; margin-top: 10px; display: none; padding: 8px; font: 11px Consolas, monospace; border: 1px dashed #ccc; background: rgba(255, 255, 255, 0.5); border-radius: 4px; cursor: pointer; box-sizing: border-box; resize: none;"
        rows="3" readonly onclick="copyCode()" placeholder="Код появится здесь..."></textarea>

    <script>
        // Стили для инпутов вынесены в константу для чистоты
        const inputStyle = "background: rgba(255, 255, 255, 0.8); border: 1px solid #ddd; padding: 5px; font-size: 11px; border-radius: 4px; outline: none; transition: 0.2s;";
        const btnStyle = "width: 28px; height: 26px; border: 1px solid #ddd; border-radius: 4px; background: #fff; cursor: pointer; font-weight: bold; transition: 0.2s; display: flex; align-items: center; justify-content: center;";

        function createRow() {
            var row = document.createElement('div');
            row.className = 'row';
            row.style = 'display: flex; gap: 6px; width: 100%; margin-bottom: 6px; align-items: center;';

            row.innerHTML =
                '<input class="link" placeholder="ссылка" style="flex: 2; ' + inputStyle + '">' +
                '<input class="fandom" placeholder="фандом" style="flex: 1; ' + inputStyle + '">' +
                '<input class="char" placeholder="персонаж" style="flex: 1; ' + inputStyle + '">' +
                '<input class="nick" placeholder="ник" style="flex: 1; ' + inputStyle + '">' +
                '<button onclick="addRow()" style="' + btnStyle + '" title="Добавить">+</button>' +
                '<button onclick="removeRow(this)" style="' + btnStyle + '" title="Удалить">−</button>';

            addEvents(row);
            return row;
        }

        function addEvents(row) {
            var inputs = row.querySelectorAll('input');
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].onfocus = function() { this.style.borderColor = '#aaa'; this.style.background = '#fff'; };
                inputs[i].onblur = function() { this.style.borderColor = '#ddd'; this.style.background = 'rgba(255, 255, 255, 0.8)'; };
                inputs[i].onkeyup = function() {
                    if (this.className != 'link') {
                        this.value = this.value.toLowerCase();
                    }
                    updateCode();
                };
            }
        }

        function addRow() {
            document.getElementById('rows').appendChild(createRow());
        }

        function removeRow(btn) {
            var container = document.getElementById('rows');
            var rows = container.querySelectorAll('.row');
            if (rows.length == 1) {
                var inputs = rows[0].querySelectorAll('input');
                for (var i = 0; i < inputs.length; i++) { inputs[i].value = ''; }
            } else {
                btn.parentNode.remove();
            }
            updateCode();
        }

        function updateCode() {
            var rows = document.querySelectorAll('#rows .row');
            var result = '';
            for (var i = 0; i < rows.length; i++) {
                var link = rows[i].querySelector('.link').value;
                var fandom = rows[i].querySelector('.fandom').value;
                var char = rows[i].querySelector('.char').value;
                var nick = rows[i].querySelector('.nick').value;

                if (link || fandom || char || nick) {
                    result += '<a href="' + link + '">' + fandom + ' — <b>' + char + '</b> — <i>' + nick + '</i></a>\n';
                }
            }
            var codeArea = document.getElementById('code');
            codeArea.value = result.trim();
            codeArea.style.display = (result === "") ? "none" : "block";
        }

        function copyCode() {
            var t = document.getElementById('code');
            t.select();
            document.execCommand('copy');
            alert('Код скопирован!');
        }

        addRow();
    </script>
</div>
[/html][hideprofile]