vidok.com/templates_user/pages/typography-page.php

<div id="typography-page">
    <div class="container">
        <section class="mt-5 mb-4">
            <div class="row">
                <div class="col-12">
                    <div class="section-title">
                        <code>&lt;h1&gt;...&lt;/h1&gt;</code>
                    </div>
                    <div class="section-content">
                        <h1 data-editable>Nagłówek H1. Rozmiar: 40px</h1>

                        <div class="typo-controls-dynamic">
                            <div class="row">
                                <div class="col-4">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <label class="input-group-text">Pogrubienie</label>
                                        </div>
                                        <select class="custom-select weight" data-control="weight">
                                            <option value="100">Thin (100)</option>
                                            <option value="200">Extra-light (200)</option>
                                            <option value="300">Light (300)</option>
                                            <option value="400" selected>Regular (400)</option>
                                            <option value="500">Medium (500)</option>
                                            <option value="600">Semi-bold (600)</option>
                                            <option value="700">Bold (700)</option>
                                            <option value="800">Extra-bold (800)</option>
                                            <option value="900">Black (900)</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-4">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <label class="input-group-text">Styl</label>
                                        </div>
                                        <select class="custom-select style" data-control="style">
                                            <option value="normal" selected>Normal</option>
                                            <option value="italic">Italic (Kursywa)</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-4">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <label class="input-group-text">Transformacja</label>
                                        </div>
                                        <select class="custom-select transform" data-control="transform">
                                            <option value="none" selected>Normal</option>
                                            <option value="uppercase">UPPERCASE</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <hr>
        <section class="mb-4">
            <div class="row">
                <div class="col-12">
                    <div class="section-title">
                        <code>&lt;h2&gt;...&lt;/h2&gt;</code>
                    </div>
                    <div class="section-content">
                        <h2 data-editable style="font-size: 34px;">Nagłówek h2. Rozmiar: 34px</h2>
                    </div>
                </div>
            </div>
        </section>
        <hr>
        <section class="mb-4">
            <div class="row">
                <div class="col-12">
                    <div class="section-title">
                        <code>&lt;h3&gt;...&lt;/h3&gt;</code>
                    </div>
                    <div class="section-content">
                        <h3 data-editable>Nagłówek h3. Rozmiar: 28px</h3>
                    </div>
                </div>
            </div>
        </section>
        <hr>
        <section class="mb-4">
            <div class="row">
                <div class="col-12">
                    <div class="section-title">
                        <code>&lt;h4&gt;...&lt;/h4&gt;</code>
                    </div>
                    <div class="section-content">
                        <h4 data-editable>Nagłówek h4. Rozmiar: 24px</h4>
                    </div>
                </div>
            </div>
        </section>
        <hr>
        <section class="mb-4">
            <div class="row">
                <div class="col-12">
                    <div class="section-title">
                        <code>&lt;h5&gt;...&lt;/h5&gt;</code>
                    </div>
                    <div class="section-content">
                        <h5 data-editable>Nagłówek h5. Rozmiar: 20px</h5>
                    </div>
                </div>
            </div>
        </section>
        <hr>
        <section class="mb-4">
            <div class="row">
                <div class="col-12">
                    <div class="section-title">
                        <code>&lt;h6&gt;...&lt;/h6&gt;</code>
                    </div>
                    <div class="section-content">
                        <h6 data-editable>Nagłówek h6. Rozmiar: 16px</h6>
                    </div>
                </div>
            </div>
        </section>

        <hr>

        <section class="mb-4">
            <div class="row">
                <div class="col-12">
                    <div class="section-title">
                        <code>&lt;p&gt;...&lt;/p&gt;</code>
                    </div>
                    <div class="section-content">
                        <p data-editable>Zwykły tekst. Rozmiar 14px.</p>
                    </div>
                </div>
            </div>
        </section>
        
        <hr>

        <section class="mb-3">
            <div class="row">
                <div class="col-12">
                    <div class="section-title">
                        <code>&lt;a&gt;...&lt;/a&gt;</code>
                    </div>
                    <div class="section-content">
                        <a href="#" data-editable class="d-block mb-2">Odnośnik. Rozmiar 14px.</a>
                    </div>
                </div>
            </div>
        </section>
        
        <hr>
        
        <section>
            <div class="row">
                <div class="col-12">
                    <div class="section-title">
                        <code>Lista &lt;ul&gt;&lt;li&gt;...&lt;/li&gt;&lt;/ul&gt;</code>
                    </div>
                    <div class="section-content">
                        <ul>
                            <li>Element listy. Rozmiar 16px</li>
                            <li>Element listy. Rozmiar 16px</li>
                            <li>Element listy. Rozmiar 16px</li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
        
        <hr>
        
        <section>
            <div class="row">
                <div class="col-12">
                    <div class="section-title">
                        <code>Lista &lt;ol&gt;&lt;li&gt;...&lt;/li&gt;&lt;/ol&gt;</code>
                    </div>
                    <div class="section-content">
                        <ol>
                            <li>Element listy. Rozmiar 16px</li>
                            <li>Element listy. Rozmiar 16px</li>
                            <li>Element listy. Rozmiar 16px</li>
                        </ol>
                    </div>
                </div>
            </div>
        </section>
        
        <hr>

        <section>
            <div class="row">
                <div class="col-12">
                    <div class="section-title">
                        <code>Lista rozmiarów tekstów &lt;p&gt;...&lt;/p&gt;</code>
                    </div>
                    <div class="section-content">
                        <p style="font-size: 10px;">Zwykły tekst. Rozmiar 10px.</p>
                        <p style="font-size: 11px;">Zwykły tekst. Rozmiar 11px.</p>
                        <p style="font-size: 12px;">Zwykły tekst. Rozmiar 12px.</p>
                        <p style="font-size: 13px;">Zwykły tekst. Rozmiar 13px.</p>
                        <p style="font-size: 14px;">Zwykły tekst. Rozmiar 14px.</p>
                        <p style="font-size: 15px;">Zwykły tekst. Rozmiar 15px.</p>
                        <p style="font-size: 16px;">Zwykły tekst. Rozmiar 16px.</p>
                        <p style="font-size: 17px;">Zwykły tekst. Rozmiar 17px.</p>
                        <p style="font-size: 18px;">Zwykły tekst. Rozmiar 18px.</p>
                        <p style="font-size: 19px;">Zwykły tekst. Rozmiar 19px.</p>
                        <p style="font-size: 20px;">Zwykły tekst. Rozmiar 20px.</p>
                        <p style="font-size: 21px;">Zwykły tekst. Rozmiar 21px.</p>
                        <p style="font-size: 22px;">Zwykły tekst. Rozmiar 22px.</p>
                        <p style="font-size: 23px;">Zwykły tekst. Rozmiar 23px.</p>
                        <p style="font-size: 24px;">Zwykły tekst. Rozmiar 24px.</p>
                        <p style="font-size: 25px;">Zwykły tekst. Rozmiar 25px.</p>
                        <p style="font-size: 26px;">Zwykły tekst. Rozmiar 26px.</p>
                    </div>
                </div>
            </div>
        </section>

        <hr>

        <section class="mb-5">
            <div class="row">
                <div class="col-12">
                    <div class="section-title text-center">
                        Elementy interfejsu
                    </div>
                </div>
            </div>
        </section>
        <section class="mb-5">
            <div class="row">
                <div class="col-12">
                    <div class="section-title">
                        Przycisk 1
                    </div>
                    <div class="section-content">
                        <a href="#" class="ui_btn_1">
                            Gdzie kupić
                            <img src="/upload/filemanager/icon/Arrow-1-yellow.svg" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </section><section class="mb-5">
            <div class="row">
                <div class="col-12">
                    <div class="section-title">
                        Przycisk 2
                    </div>
                    <div class="section-content">
                        <a href="#" class="ui_btn_2">
                            Bezpłatna wycena
                            <img src="/upload/filemanager/icon/Vector.svg" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    
    const sourceControl = document.querySelector('.typo-controls-dynamic');
    
    if (!sourceControl) {
        return;
    }

    const controlsTemplateHTML = sourceControl.outerHTML;

    const editableElements = document.querySelectorAll('[data-editable]');

    editableElements.forEach(el => {
        const parent = el.closest('.section-content');
        if (!parent) return;

        let controlsPanel = parent.querySelector('.typo-controls-dynamic');

        if (!controlsPanel) {
            parent.insertAdjacentHTML('beforeend', controlsTemplateHTML);
            controlsPanel = parent.querySelector('.typo-controls-dynamic:last-child');
        }

        const selects = controlsPanel.querySelectorAll('select');
        
        selects.forEach(select => {
            
            const computedStyle = window.getComputedStyle(el);
            const controlType = select.dataset.control;

            if (controlType === 'weight') {
                let weight = computedStyle.fontWeight;
                if (weight === 'bold') weight = '700';
                if (weight === 'normal') weight = '400';
                select.value = weight;
            }
            if (controlType === 'style') {
                select.value = computedStyle.fontStyle;
            }
            if (controlType === 'transform') {
                select.value = computedStyle.textTransform;
            }

            select.addEventListener('change', function() {
                const type = this.dataset.control;
                const val = this.value;

                if (type === 'weight') el.style.fontWeight = val;
                if (type === 'style') el.style.fontStyle = val;
                if (type === 'transform') el.style.textTransform = val;
            });
        });
    });
});
</script>