[html]<style>
   
    * {
        box-sizing: border-box;
        text-transform: lowercase;
    }
   
    .generator-box {
        background: var(--sec-bg);
        border-radius: 16px;
        padding: 20px;
        max-width: 1200px;
        margin: 0 auto;
        font-family: 'Segoe UI', Arial, sans-serif;
    }
   
    .generator-box h2 {
        color: var(--textcolor);
        margin: 0 0 20px 0;
        font-size: 22px;
        padding-left: 15px;
    }
   
    .tab-buttons {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
        flex-wrap: wrap;
    }
   
    .tab-btn {
        background: var(--post-bg);
        border: none;
        padding: 8px 20px;
        border-radius: 20px;
        cursor: pointer;
        font-weight: bold;
    }
   
    .tab-btn.active {
        background: var(--textcolor);
        color: var(--white);
    }
   
    .tab-content {
        display: none;
    }
   
    .tab-content.active {
        display: block;
    }
   
    .gen-row {
        display: flex;
        gap: 40px;
        flex-wrap: wrap;
        margin-bottom: 20px;
    }
   
    .gen-col {
        flex: 1;
        max-width: 380px;
    }
   
    .gen-form-group {
        margin-bottom: 15px;
    }
   
    .gen-form-group label {
        display: block;
        font-weight: bold;
        margin-bottom: 5px;
        color: var(--textcolor);
    }
   
    .gen-form-group input,
    .gen-form-group textarea {
        width: 100%;
        padding: 8px 12px;
        border: 1px solid var(--textcolor) !important;
        border-radius: 8px;
        background: var(--post-bg) !important;
        font-family: inherit;
    }
   
    .gen-form-group textarea {
        resize: vertical;
        min-height: 80px;
    }
   
    .gen-btn {
        background: var(--link);
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 8px;
        cursor: pointer;
        margin-right: 10px;
        margin-bottom: 10px;
        font-size: 14px;
        transition: all 0.2s;
    }
   
    .gen-btn:hover {
        opacity: 0.85;
        transform: scale(0.98);
    }
   
    .gen-btn-green {
        background: var(--link);
    }
   
    .gen-btn-blue {
        background: var(--body-bg);
    }
   
    .gen-btn-red {
        background: var(--link-hover);
    }
   
    .gen-btn-copied {
        background: var(--body-bg) !important;
    }
   
    .twink-item,
    .coupon-item {
        background: var(--post-bg);
        padding: 10px;
        margin-bottom: 10px;
        border-radius: 8px;
        border-left: 4px solid var(--textcolor);
    }
   
    .inline-row {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-bottom: 8px;
    }
   
    .inline-row input {
        flex: 1;
    }
   
    .remove-btn {
        background: #aa3e1c;
        color: white;
        border: none;
        padding: 6px 12px;
        border-radius: 6px;
        cursor: pointer;
    }
   
    .gen-note,
    .note {
        font-size: 12px;
        background: var(--post-bg);
        padding: 10px;
        border-radius: 8px;
        margin-top: 10px;
        margin-bottom: 10px;
        color: var(--textcolor);
    }
   
    .gen-output,
    .output {
        background: var(--textcolor);
        border-radius: 16px;
        padding: 20px;
        margin-top: 20px;
    }
   
    .gen-output h3,
    .output h3 {
        color: var(--sec-bg);
        margin: 0 0 10px 0;
        font-size: 16px;
    }
   
    .gen-code-block,
    .code-block {
        background: var(--post-bg);
        color: var(--textcolor);
        font-family: 'Courier New', monospace;
        padding: 12px;
        border-radius: 8px;
        font-size: 12px;
        overflow-x: auto;
        white-space: pre-wrap;
        word-break: break-all;
        max-height: 300px;
    }
   
    .badge {
        background: var(--textcolor);
        color: white;
        font-size: 11px;
        padding: 2px 8px;
        border-radius: 20px;
        margin-left: 8px;
    }
   
    .button-group {
        text-align: center;
        margin: 20px 0;
    }
   
    .tab-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        margin-bottom: 15px;
    }
   
    .tab-header h3 {
        margin: 0;
        color: var(--textcolor);
    }
</style>

<div class="generator-box">
    <h2>Генератор страницы персонажа</h2>
   
    <div class="tab-buttons">
        <button class="tab-btn active" data-tab="main">Основное</button>
        <button class="tab-btn" data-tab="twinks">Твинки</button>
        <button class="tab-btn" data-tab="coupons">Купоны</button>
        <button class="tab-btn" data-tab="gallery">Галереи</button>
    </div>
   
    <!-- ========== ВКЛАДКА 1: ОСНОВНОЕ ========== -->
    <div id="tab-main" class="tab-content active">
        <div class="tab-header">
            <h3>Основная информация</h3>
            <div>
                <button class="gen-btn gen-btn-green" id="generateMainBtn">Сгенерировать код</button>
                <button class="gen-btn gen-btn-blue" id="copyMainBtn">Копировать</button>
            </div>
        </div>
        <div class="gen-row">
            <div class="gen-col">
                <div class="gen-form-group">
                    <label>URL гифки/аватара</label>
                    <input type="text" id="g_avatar" placeholder="https://example.com/avatar.gif">
                </div>
                <div class="gen-form-group">
                    <label>Имя персонажа</label>
                    <input type="text" id="g_name" placeholder="Имя персонажа">
                </div>
            </div>
            <div class="gen-col">
                <div class="gen-form-group">
                    <label>Фракция, для сопротивленцев ячейка (если известна) и позывной</label>
                    <input type="text" id="g_fraction" placeholder="Фракция | позывной">
                </div>
                <div class="gen-form-group">
                    <label>Род занятий</label>
                    <textarea id="g_occupation" rows="4" placeholder="Род занятий"></textarea>
                </div>
            </div>
        </div>
        <div class="gen-output">
            <h3>Код блока .general (внутренность левой колонки)</h3>
            <div class="gen-code-block" id="mainCode">Заполните данные и нажмите "Сгенерировать код"</div>
        </div>
    </div>
   
    <!-- ========== ВКЛАДКА 2: ТВИНКИ ========== -->
    <div id="tab-twinks" class="tab-content">
        <div class="tab-header">
            <h3>Твинки <span class="badge">можно добавлять</span></h3>
            <div>
                <button class="gen-btn gen-btn-green" id="generateTwinksBtn">Сгенерировать код</button>
                <button class="gen-btn gen-btn-blue" id="copyTwinksBtn">Копировать</button>
            </div>
        </div>
        <div id="g_twinks_container"></div>
        <button class="gen-btn" id="g_add_twink">+ Добавить твинка</button>
        <button class="gen-btn gen-btn-red" id="g_clear_twinks">🗑 Очистить все</button>
        <div class="gen-output" style="margin-top: 15px;">
            <h3>Код только для блока твинков (внутренность #sm1)</h3>
            <div class="gen-code-block" id="twinksCode">Добавьте твинков и нажмите "Сгенерировать код"</div>
        </div>
    </div>
   
    <!-- ========== ВКЛАДКА 3: КУПОНЫ ========== -->
    <div id="tab-coupons" class="tab-content">
        <div class="tab-header">
            <h3>Купоны <span class="badge">можно добавлять</span></h3>
            <div>
                <button class="gen-btn gen-btn-green" id="generateCouponsBtn">Сгенерировать код</button>
                <button class="gen-btn gen-btn-blue" id="copyCouponsBtn">Копировать</button>
            </div>
        </div>
        <div id="g_coupons_container"></div>
        <button class="gen-btn" id="g_add_coupon">+ Добавить купон</button>
        <button class="gen-btn gen-btn-red" id="g_clear_coupons">🗑 Очистить все</button>
        <div class="gen-output" style="margin-top: 15px;">
            <h3>Код только для купонов (внутренность .coupon-list)</h3>
            <div class="gen-code-block" id="couponsCode">Добавьте купоны и нажмите "Сгенерировать код"</div>
        </div>
    </div>
   
    <!-- ========== ВКЛАДКА 4: ГАЛЕРЕИ ========== -->
    <div id="tab-gallery" class="tab-content">
        <div class="tab-header">
            <h3>Галереи</h3>
            <div>
                <button class="gen-btn gen-btn-green" id="generateGalleryBtn">Сгенерировать код</button>
                <button class="gen-btn gen-btn-blue" id="copyGalleryBtn">Копировать</button>
            </div>
        </div>
        <div class="gen-form-group">
            <label>Текст для плашки</label>
            <input type="text" id="g_fonText" placeholder="Текст на плашке">
        </div>
        <div class="gen-form-group">
            <label>Плашки (URL, каждый с новой строки)</label>
            <textarea id="g_plashki" rows="4" placeholder="https://example.com/plashka1.gif
https://example.com/plashka2.png"& … xtarea>
        </div>
        <div class="gen-form-group">
            <label>Фоны (URL, каждый с новой строки)</label>
            <textarea id="g_foni" rows="4" placeholder="https://example.com/fon1.png
https://example.com/fon2.png"></textarea>
        </div>
        <div class="gen-form-group">
            <label>Иконки (URL, каждый с новой строки)</label>
            <textarea id="g_icons" rows="4" placeholder="https://example.com/icon1.png
https://example.com/icon2.png"> … xtarea>
        </div>
        <div class="gen-output" style="margin-top: 15px;">
            <h3>Код для галерей (с подсказками)</h3>
            <div class="gen-code-block" id="galleryCode">Введите данные и нажмите "Сгенерировать код"</div>
        </div>
    </div>
   
    <div class="button-group">
        <button class="gen-btn gen-btn-green" id="g_full_page_btn">Собрать ВСЁ и скопировать полную страницу</button>
        <button class="gen-btn gen-btn-red" id="g_clear_btn">🗑 Очистить всё</button>
    </div>
   
    <div class="gen-note" style="text-align: center;">
        💡 Каждая вкладка генерирует ТОЛЬКО внутреннее наполнение своего блока.<br>
        Кнопка внизу собирает всё вместе в готовую страницу pages/
    </div>
</div>

<script>
(function() {
    let twinks = [];
    let coupons = [];
   
    const tabs = document.querySelectorAll('.tab-btn');
    const contents = document.querySelectorAll('.tab-content');
   
    tabs.forEach(tab => {
        tab.addEventListener('click', function() {
            const tabId = this.getAttribute('data-tab');
            tabs.forEach(t => t.classList.remove('active'));
            contents.forEach(c => c.classList.remove('active'));
            this.classList.add('active');
            document.getElementById(`tab-${tabId}`).classList.add('active');
        });
    });
   
    function escapeHtml(str) {
        if (!str) return '';
        return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
    }
   
    function copyToClipboard(text, btn, successMsg = 'Скопировано!') {
        const ta = document.createElement('textarea');
        ta.value = text;
        ta.style.cssText = 'position:fixed;top:-9999px;left:-9999px';
        document.body.appendChild(ta);
        ta.select();
        let ok = false;
        try { ok = document.execCommand('copy'); } catch(e) { ok = false; }
        document.body.removeChild(ta);
       
        if (ok) {
            const orig = btn.innerHTML;
            btn.innerHTML = successMsg;
            btn.classList.add('gen-btn-copied');
            setTimeout(() => { btn.innerHTML = orig; btn.classList.remove('gen-btn-copied'); }, 2000);
        } else {
            btn.innerHTML = 'Ошибка!';
            setTimeout(() => btn.innerHTML = btn.getAttribute('data-original') || 'Копировать', 2000);
        }
    }
   
    // ========== ОСНОВНОЕ ==========
    function generateMainHTML() {
        const avatar = document.getElementById('g_avatar').value;
        const name = document.getElementById('g_name').value;
        const fraction = document.getElementById('g_fraction').value;
        const occupation = document.getElementById('g_occupation').value;
       
        return `<div class="general"><img src="${avatar}" />
<h2>${escapeHtml(name)}</h2>
<div class="fraction">${escapeHtml(fraction)}</div>
<div class="occupation">${escapeHtml(occupation).replace(/\n/g, '<br />')}</div>
</div>`;
    }
   
    function generateMainAndDisplay() {
        const html = generateMainHTML();
        const escaped = html.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
        document.getElementById('mainCode').innerHTML = escaped;
        return html;
    }
   
    function copyMain() {
        const html = generateMainHTML();
        const btn = document.getElementById('copyMainBtn');
        copyToClipboard(html, btn);
    }
   
    // ========== ТВИНКИ ==========
    function generateTwinksHTML() {
        let html = '';
        for (let t of twinks) {
            html += `<!-- начало твинка -->
<div class="twink"><div class="twink-text">`;
            if (t.link && t.link.trim()) {
                html += `<a href="${t.link}"><strong>${escapeHtml(t.name) || 'ссылка на профиль'}</strong></a><br />${escapeHtml(t.description)}`;
            } else {
                html += `<strong>${escapeHtml(t.name) || '—'}</strong><br />${escapeHtml(t.description)}`;
            }
            html += `</div>
</div>
<!-- конец твинка -->
`;
        }
        return html;
    }
   
    function generateTwinksAndDisplay() {
        const html = generateTwinksHTML();
        const escaped = html.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
        document.getElementById('twinksCode').innerHTML = escaped;
        return html;
    }
   
    function copyTwinks() {
        const html = generateTwinksHTML();
        const btn = document.getElementById('copyTwinksBtn');
        copyToClipboard(html, btn);
    }
   
    // ========== КУПОНЫ ==========
    function generateCouponsHTML() {
        let html = '';
        for (let c of coupons) {
            html += `<!-- начало купона -->
<div class="coupon">
    <div class="coupon-img"><img src="${c.img}" alt="" /></div>
    <div class="coupon-content">
        <div class="coupon-title">${escapeHtml(c.title)}</div>
        <div class="coupon-desc">${escapeHtml(c.desc)}</div>
        <div class="coupon-meta">${escapeHtml(c.meta)}</div>
    </div>
</div>
<!-- конец купона -->
`;
        }
        return html;
    }
   
    function generateCouponsAndDisplay() {
        const html = generateCouponsHTML();
        const escaped = html.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
        document.getElementById('couponsCode').innerHTML = escaped;
        return html;
    }
   
    function copyCoupons() {
        const html = generateCouponsHTML();
        const btn = document.getElementById('copyCouponsBtn');
        copyToClipboard(html, btn);
    }
   
    // ========== ГАЛЕРЕИ ==========
    function generateGalleryHTML() {
        const fonText = document.getElementById('g_fonText').value;
        let plashki = document.getElementById('g_plashki').value.split('\n').filter(u => u.trim());
        let foni = document.getElementById('g_foni').value.split('\n').filter(u => u.trim());
        let icons = document.getElementById('g_icons').value.split('\n').filter(u => u.trim());
       
        let result = '';
       
        // Плашки
        if (plashki.length > 0) {
            result += `<!-- начало плашки -->
<div class="plashki-container">
`;
            for (let url of plashki) {
                result += `    <div class="plashka-item">
        <img src="${url}" />
        <div class="fon-text">${escapeHtml(fonText)}</div>
    </div>
`;
            }
            result += `</div>
<!-- конец плашки -->
`;
        }
       
        // Фоны
        if (foni.length > 0) {
            result += `<!-- начало фонов -->
<div class="foni-container">
${foni.map(url => `<img src="${url}" />`).join(' ')}
</div>
<!-- конец фонов -->
`;
        }
       
        // Иконки
        if (icons.length > 0) {
            result += `<!-- начало иконок -->
<div class="icons-container">
${icons.map(url => `<img src="${url}" />`).join(' ')}
</div>
<!-- конец иконок -->`;
        }
       
        if (!result) {
            result = '<!-- нет галерей -->';
        }
       
        return result.trim();
    }
   
    function generateGalleryAndDisplay() {
        const html = generateGalleryHTML();
        const escaped = html.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
        document.getElementById('galleryCode').innerHTML = escaped;
        return html;
    }
   
    function copyGallery() {
        const html = generateGalleryHTML();
        const btn = document.getElementById('copyGalleryBtn');
        copyToClipboard(html, btn);
    }
   
    // ========== ПОЛНАЯ СТРАНИЦА ==========
    function generateFullPageHTML() {
        const avatar = document.getElementById('g_avatar').value;
        const name = document.getElementById('g_name').value;
        const fraction = document.getElementById('g_fraction').value;
        const occupation = document.getElementById('g_occupation').value;
        const fonText = document.getElementById('g_fonText').value;
       
        let plashki = document.getElementById('g_plashki').value.split('\n').filter(u => u.trim());
        let foni = document.getElementById('g_foni').value.split('\n').filter(u => u.trim());
        let icons = document.getElementById('g_icons').value.split('\n').filter(u => u.trim());
       
        // Твинки с подсказками
        let twinksHtml = '';
        for (let t of twinks) {
            twinksHtml += `<!-- начало твинка -->
<div class="twink"><div class="twink-text">`;
            if (t.link && t.link.trim()) {
                twinksHtml += `<a href="${t.link}"><strong>${escapeHtml(t.name) || 'ссылка на профиль'}</strong></a><br />${escapeHtml(t.description)}`;
            } else {
                twinksHtml += `<strong>${escapeHtml(t.name) || '—'}</strong><br />${escapeHtml(t.description)}`;
            }
            twinksHtml += `</div>
</div>
<!-- конец твинка -->
`;
        }
       
        // Купоны с подсказками
        let couponsHtml = '';
        for (let c of coupons) {
            couponsHtml += `<!-- начало купона -->
<div class="coupon">
    <div class="coupon-img"><img src="${c.img}" alt="" /></div>
    <div class="coupon-content">
        <div class="coupon-title">${escapeHtml(c.title)}</div>
        <div class="coupon-desc">${escapeHtml(c.desc)}</div>
        <div class="coupon-meta">${escapeHtml(c.meta)}</div>
    </div>
</div>
<!-- конец купона -->
`;
        }
       
        // Галереи
        let profileContent = '';
       
        if (plashki.length > 0) {
            profileContent += `<!-- начало плашки -->
<div class="plashki-gallery">
<div class="gallery-title">плашки</div>
<div class="plashki-container">
`;
            for (let url of plashki) {
                profileContent += `    <div class="plashka-item">
        <img src="${url}" />
        <div class="fon-text">${escapeHtml(fonText)}</div>
    </div>
`;
            }
            profileContent += `</div>
</div>
<!-- конец плашки -->
`;
        }
       
        if (foni.length > 0) {
            profileContent += `<!-- начало фонов -->
<div class="phoni-gallery">
<div class="gallery-title">фоны</div>
${foni.map(url => `<img src="${url}" />`).join(' ')}
</div>
<!-- конец фонов -->
`;
        }
       
        if (icons.length > 0) {
            profileContent += `<!-- начало иконок -->
<div class="icons-gallery">
<div class="gallery-title">иконки</div>
${icons.map(url => `<img src="${url}" />`).join(' ')}
</div>
<!-- конец иконок -->
`;
        }
       
        if (!profileContent) {
            profileContent = '<div class="gallery-title">нет данных</div>';
        }
       
        return `<div class="character">
<div class="modal-content">
<div class="left-column">
<div class="general"><img src="${avatar}" />
<h2>${escapeHtml(name)}</h2>
<div class="fraction">${escapeHtml(fraction)}</div>
<div class="occupation">${escapeHtml(occupation).replace(/\n/g, '<br />')}</div>
</div>
</div>
<div class="right-column">
<div class="menu">
<div class="menu-links"> <span alt="#sm1" onclick='showTab(this);'>твинки</span> <span alt="#sm2" onclick='showTab(this);'>купоны</span> <span alt="#sm3" onclick='showTab(this);'>профиль</span>
</div>
<div id="submenu">
<div id="sm1" class="submenutext">
<!-- твинки-->
${twinksHtml || ' '}
</div>
<div id="sm2" class="submenutext" style="display:none;">
<div class="coupon-list">
<!-- купоны-->
${couponsHtml || '<div class="coupon">нет купонов</div>'}
</div>
</div>
<div id="sm3" class="submenutext" style="display:none;">
${profileContent}
</div>
</div>
<a class="close-reveal-modal">&times;</a>
</div>
</div>
</div>`;
    }
   
    function copyFullPage() {
        const html = generateFullPageHTML();
        const btn = document.getElementById('g_full_page_btn');
        copyToClipboard(html, btn, 'Всё скопировано!');
    }
   
    // Очистка всего
    function clearAll() {
        document.getElementById('g_avatar').value = '';
        document.getElementById('g_name').value = '';
        document.getElementById('g_fraction').value = '';
        document.getElementById('g_occupation').value = '';
        document.getElementById('g_fonText').value = '';
        document.getElementById('g_plashki').value = '';
        document.getElementById('g_foni').value = '';
        document.getElementById('g_icons').value = '';
        twinks = [];
        coupons = [];
        renderTwinks();
        renderCoupons();
        document.getElementById('mainCode').innerHTML = 'Форма очищена';
        document.getElementById('twinksCode').innerHTML = 'Форма очищена';
        document.getElementById('couponsCode').innerHTML = 'Форма очищена';
        document.getElementById('galleryCode').innerHTML = 'Форма очищена';
    }
   
    // Твинки
    function renderTwinks() {
        const container = document.getElementById('g_twinks_container');
        if (!container) return;
        if (twinks.length === 0) {
            container.innerHTML = '<div class="gen-note">Нет твинков. Нажмите "+ Добавить твинка"</div>';
            return;
        }
        container.innerHTML = twinks.map((t, idx) => `
            <div class="twink-item">
                <div class="inline-row">
                    <input type="text" placeholder="Имя" value="${escapeHtml(t.name)}" onchange="window.updateTwink(${idx}, 'name', this.value)">
                    <input type="text" placeholder="URL ссылки на профиль" value="${escapeHtml(t.link)}" onchange="window.updateTwink(${idx}, 'link', this.value)">
                    <button class="remove-btn" onclick="window.removeTwink(${idx})">✕</button>
                </div>
                <input type="text" placeholder="чистота крови, фракция, занятость" value="${escapeHtml(t.description)}" onchange="window.updateTwink(${idx}, 'description', this.value)" style="width:100%; margin-top:5px;">
            </div>
        `).join('');
    }
   
    function addTwink() { twinks.push({ name: "", link: "", description: "" }); renderTwinks(); }
    function removeTwink(i) { twinks.splice(i, 1); renderTwinks(); }
    function updateTwink(i, f, v) { if (twinks[i]) twinks[i][f] = v; }
    function clearTwinks() { twinks = []; renderTwinks(); generateTwinksAndDisplay(); }
   
    // Купоны
    function renderCoupons() {
        const container = document.getElementById('g_coupons_container');
        if (!container) return;
        if (coupons.length === 0) {
            container.innerHTML = '<div class="gen-note">Нет купонов. Нажмите "+ Добавить купон"</div>';
            return;
        }
        container.innerHTML = coupons.map((c, idx) => `
            <div class="coupon-item">
                <div class="inline-row">
                    <input type="text" placeholder="URL картинки" value="${escapeHtml(c.img)}" onchange="window.updateCoupon(${idx}, 'img', this.value)">
                    <input type="text" placeholder="Заголовок" value="${escapeHtml(c.title)}" onchange="window.updateCoupon(${idx}, 'title', this.value)">
                    <button class="remove-btn" onclick="window.removeCoupon(${idx})">✕</button>
                </div>
                <div class="inline-row" style="margin-top:5px;">
                    <input type="text" placeholder="Описание" value="${escapeHtml(c.desc)}" onchange="window.updateCoupon(${idx}, 'desc', this.value)" style="flex:2;">
                    <input type="text" placeholder="Действует до" value="${escapeHtml(c.meta)}" onchange="window.updateCoupon(${idx}, 'meta', this.value)" style="flex:1;">
                </div>
            </div>
        `).join('');
    }
   
    function addCoupon() { coupons.push({ img: "", title: "", desc: "", meta: "" }); renderCoupons(); }
    function removeCoupon(i) { coupons.splice(i, 1); renderCoupons(); }
    function updateCoupon(i, f, v) { if (coupons[i]) coupons[i][f] = v; }
    function clearCoupons() { coupons = []; renderCoupons(); generateCouponsAndDisplay(); }
   
    window.updateTwink = updateTwink;
    window.removeTwink = removeTwink;
    window.updateCoupon = updateCoupon;
    window.removeCoupon = removeCoupon;
   
    document.getElementById('generateMainBtn').onclick = generateMainAndDisplay;
    document.getElementById('copyMainBtn').onclick = copyMain;
    document.getElementById('generateTwinksBtn').onclick = generateTwinksAndDisplay;
    document.getElementById('copyTwinksBtn').onclick = copyTwinks;
    document.getElementById('generateCouponsBtn').onclick = generateCouponsAndDisplay;
    document.getElementById('copyCouponsBtn').onclick = copyCoupons;
    document.getElementById('generateGalleryBtn').onclick = generateGalleryAndDisplay;
    document.getElementById('copyGalleryBtn').onclick = copyGallery;
    document.getElementById('g_full_page_btn').onclick = copyFullPage;
    document.getElementById('g_clear_btn').onclick = clearAll;
    document.getElementById('g_add_twink').onclick = addTwink;
    document.getElementById('g_clear_twinks').onclick = clearTwinks;
    document.getElementById('g_add_coupon').onclick = addCoupon;
    document.getElementById('g_clear_coupons').onclick = clearCoupons;
   
    renderTwinks();
    renderCoupons();
})();
</script>[/html]