банк банк банк

[html]<style>

/* ------------ банк ----------*/
.bank-area {
grid-area: shop;
position: relative;
width: 840px;
height: 540px;
padding: 10px;
background: #f6f6f6;
border-radius: 6px;
display: grid;
grid-template-rows: 500px;
grid-template-columns: 50% 50%;
gap: 10px;
grid-template-areas:
"get spend";
border:1px solid rgb(var(--acc2));
margin: 0 auto;
}

.get-block {
grid-area: get;
position: absolute;
top: 20px;
width: 400px;
height: 500px;
background: rgba(255, 255, 255, 1);
border-radius: 4px;
padding: 10px 5px;
box-sizing: border-box;
border:1px solid rgb(var(--acc2));
overflow: visible;
}

.get-container {
overflow: auto;
height: 450px;
}

.spend-block {
grid-area: spend;
position: absolute;
top: 20px;
width: 400px;
height: 500px;
background: rgba(255, 255, 255, 1);
border-radius: 4px;
padding: 10px 5px;
box-sizing: border-box;
border:1px solid rgb(var(--acc2));
overflow: visible;
}

.spend-container {
overflow: auto;
height: 450px;
}

.bankphp {
background: rgb(var(--acc2));
border: 1px solid rgb(var(--acc2));
padding: 2px 10px 0;
border-radius: 0px 0px 10px 10px;
text-align: center;
font-size: 10px;
line-height: 100%;
align-items: start;
position: relative;
left: 10px;
top: -10px;
color: #fff;
height: 17px;
width:150px;
}

.tab-btn input { display: none; }
.tab-btn { cursor: pointer; padding: 8px 16px; background: #f0f0f0; border-radius: 5px; }
.tab-btn:has(input:checked) { background: #007bff; color: white; }

.get-block .tabs-buttons:has(input[value="get-tab1"]:checked) ~ .tabs-content #get-tab1,
.get-block .tabs-buttons:has(input[value="get-tab2"]:checked) ~ .tabs-content #get-tab2,
.get-block .tabs-buttons:has(input[value="get-tab3"]:checked) ~ .tabs-content #get-tab3 { display: block; }

.get-block .tab-pane { display: none; }

.tabs-buttons { display: flex; gap: 5px; margin-bottom: 5px; }
.tab-btn {
cursor: pointer;
background: rgb(var(--acc2));
padding: 4px 10px 0px;
border-radius: 0px 0px 10px 10px;
text-align: center;
font-size: 9px;
line-height: 100%;
align-items: start;
position: relative;
left: 3px;
top: -10px;
color: #fff;
height: 25px;
width:70px;
user-select: none;
}
.tab-btn:has(input:checked) {
background: rgb(var(--acc-rose));
color: #222;
height: 30px;
padding: 5px 10px 5px;
user-select: none;
}

.get-block[data-title]::before,
.spend-block[data-title]::before {
content: attr(data-title);
position: absolute;
top: -15px;
right: 0;
font-size: 12px;
font-weight: bold;
color: #b9bec9;
text-transform: uppercase;
}

/* Стили для операций */
.op-item {
cursor: pointer;
padding: 4px 8px;
border-radius: 3px;
transition: background 0.1s;
user-select: none;
}
.op-item:hover { background: rgba(185,190,201,0.3); }
.op-item.added { background: #e8f5e9; color: #2e7d32; font-weight: 500; }

/* Контейнер для кнопок и отчёта - вне банка */
.bank-controls {
width: 820px;
margin: 10px auto 0;
text-align: center;
display: flex;
gap: 10px;
justify-content: center;
}

/* Отчет */
#bank-report-output {
width: 820px;
margin: 10px auto 0;
padding: 12px;
background: #fff;
border: 1px solid rgb(var(--acc2));
border-radius: 4px;
font-family: monospace;
font-size: 10px;
line-height: 1;
white-space: pre-wrap;
display: none;
}
#bank-report-output.show { display: block; }

.report-line {
padding: 3px 0;
cursor: pointer;
position: relative;
}
.report-line:hover {
background: rgba(185,190,201,0.2);
border-radius: 3px;
}
.report-remove {
display: inline-block;
margin-left: 6px;
padding: 0 5px;
background: #bbbbbb;
color: white;
border-radius: 3px;
font-size: 10px;
cursor: pointer;
font-weight: bold;
line-height: 14px;
}
.report-remove:hover { background: #d1d1d1; }

.report-total {
margin-top: 10px;
padding-top: 8px;
border-top: 1px solid rgb(var(--acc2));
font-weight: bold;
}
</style>

<div class="bank-area"><div class="bankphp">live.stream/bank.php</div>


<div class="get-block" data-title="получить">
<div class="tabs-buttons">
<label class="tab-btn"><input type="radio" name="get-tab" value="get-tab1" checked></label>
</div>

<div class="tabs-content">

<div class="tab-pane" id="get-tab1"><div class="get-container">
<div class="op-item" data-type="get" data-name="заявка в нужных" data-cost="100">— заявка в нужных: 100$</div>
<div class="op-item" data-type="get" data-name="заявка в хочу видеть" data-cost="70">— заявка в "хочу видеть": 70$</div>
<div class="op-item" data-type="get" data-name="забрал из хочу к вам" data-cost="150">— забрал из "хочу к вам": 150$</div>
<div class="op-item" data-type="get" data-name="пришел по заявке из нужных / хочу видеть" data-cost="300">— пришел по заявке из нужных / хочу видеть: 300$</div>
<div class="op-item" data-type="get" data-name="пригласил друга (получают оба)" data-cost="500">— пригласил друга (получают оба): 500$</div>
<br>
<div class="op-item" data-type="get" data-name="100 сообщений" data-cost="50">— 100 сообщений: 50$</div>
<div class="op-item" data-type="get" data-name="500 сообщений" data-cost="100">— 500 сообщений: 100$</div>
<div class="op-item" data-type="get" data-name="каждая 1000 сообщений" data-cost="150">— каждая 1000 сообщений: 150$</div>
<div class="op-item" data-type="get" data-name="100 позитива" data-cost="50">— 100 позитива: 50$</div>
<div class="op-item" data-type="get" data-name="каждая 1000 позитива" data-cost="150">— каждая 1000 позитива: 150$</div>
<div class="op-item" data-type="get" data-name="100 репутации" data-cost="50">— 100 репутации: 50$</div>
<div class="op-item" data-type="get" data-name="каждая 1000 репутации" data-cost="150">— каждая 1000 репутации: 150$</div>
<div class="op-item" data-type="get" data-name="попал в новости (за пост)" data-cost="200">— попал в новости (за пост): 200$</div>
<div class="op-item" data-type="get" data-name="попал в новости (за флуд)" data-cost="150">— попал в новости (за флуд): 150$</div>
<div class="op-item" data-type="get" data-name="попал в новости (за пару)" data-cost="150">— попал в новости (за пару): 150$</div>
<br>
<div class="op-item" data-type="get" data-name="открытие эпизода" data-cost="150">— открытие эпизода: 150$</div>
<div class="op-item" data-type="get" data-name="каждая тысяча символов в посте" data-cost="100">— каждая тысяча символов в посте: 100$</div>
<div class="op-item" data-type="get" data-name="пост свыше 10к" data-cost="300">— пост свыше 10к: 300$</div>
<div class="op-item" data-type="get" data-name="ответ на пост в течение суток" data-cost="150">— ответ на пост в течение суток: 150$</div>
<div class="op-item" data-type="get" data-name="закрытие эпизода" data-cost="200">— закрытие эпизода: 200$</div>
<br>
<div class="op-item" data-type="get" data-name="открытие снс-эпизода" data-cost="100">— открытие снс-эпизода: 100$</div>
<div class="op-item" data-type="get" data-name="пост в снс эпизоде" data-cost="50">— пост в снс эпизоде: 50$</div>
<div class="op-item" data-type="get" data-name="закрытие снс-эпизода" data-cost="150">— закрытие снс-эпизода: 150$</div>
<br>
<div class="op-item" data-type="get" data-name="пост в социальных сетях" data-cost="50">— пост в социальных сетях: 50$</div>
<div class="op-item" data-type="get" data-name="участие в конкурсах" data-cost="50">— участие в конкурсах: 50$</div>
<br>
<div class="op-item" data-type="get" data-name="подарочная графика" data-cost="200">— подарочная графика: 200$</div>
<div class="op-item" data-type="get" data-name="наш баннер на маяке/рено" data-cost="500">— наш баннер на маяке/рено: 500$</div>
<br>
<div class="op-item" data-type="get" data-name="1 рекламный пост" data-cost="5">— 1 рекламный пост: 5$</div>
<div class="op-item" data-type="get" data-name="50 рекламных постов" data-cost="250">— 50 рекламных постов: 250$</div>
<div class="op-item" data-type="get" data-name="100 рекламных постов" data-cost="650">— 100 рекламных постов: 650$</div>
<br>
<div class="op-item" data-type="get" data-name="6 часов онлайн" data-cost="200">— 6 часов онлайн: 200$</div>
<div class="op-item" data-type="get" data-name="12 часов онлайн" data-cost="500">— 12 часов онлайн: 500$</div>
<div class="op-item" data-type="get" data-name="24 часа онлайн" data-cost="1000">— 24 часа онлайн: 1000$</div>
</div></div>
</div>
</div>

<div class="spend-block" data-title="потратить">
<div class="spend-container">
<div class="op-item" data-type="spend" data-name="выкуп имени / фамилии" data-cost="1500">— выкуп имени / фамилии: 1500$</div>
<div class="op-item" data-type="spend" data-name="листовка с нужным от админов" data-cost="2500">— листовка с нужным от админов: 2 500$</div>
<div class="op-item" data-type="spend" data-name="листовка с нужным от админов + пиар" data-cost="3000">— листовка с нужным от админов + пиар: 3000$</div>
<div class="op-item" data-type="spend" data-name="смена внешности" data-cost="0">— смена внешности: 0$</div>
<div class="op-item" data-type="spend" data-name="выкуп внешности" data-cost="2000">— выкуп внешности на две недели: 2 000$</div>
<div class="op-item" data-type="spend" data-name="первый твинк (бесплатно)" data-cost="0">— первый твинк: бесплатно</div>
<div class="op-item" data-type="spend" data-name="второй твинк" data-cost="5000">— второй твинк: 5 000$</div>
<div class="op-item" data-type="spend" data-name="третий и последующие твинки" data-cost="10000">— третий и последующие: 10 000$</div>
</div>
</div>
</div>

<div id="bank-report-output"></div>
<div class="bank-controls">
<button id="bank-reply" style="padding:6px 14px; cursor:pointer; background:rgb(var(--acc3)); color:#fff; border:none; border-radius:4px;">
Вставить отчёт
</button>
</div>

[/html]

<label style="display:flex; align-items:center; gap:4px;">
<input type="checkbox" class="proof-discount">
скидка 50%
</label>

Код:

<script type="text/javascript">// YJ & qwen
// YJ & qwen (modded)
(function() {
    var currentUrl = window.location.href;
    if (currentUrl.indexOf('/viewtopic.php?id=9') === -1) {
        return;
    }

document.addEventListener('DOMContentLoaded', () => {
    const bankState = [];
    const replyBtn = document.getElementById('bank-reply');
    const replyArea = document.getElementById('main-reply');
    const reportOutput = document.getElementById('bank-report-output');

    // Рендер отчёта
    function renderReport() {
        if (!bankState.length) {
            reportOutput.innerHTML = '<em style="color:#888">Пока ничего не выбрано. Кликни на операции выше.</em>';
            reportOutput.classList.add('show');
            return;
        }

        let lines = [];
        let total = 0;
        let calcParts = [];

        bankState.forEach((op, idx) => {
            const sign = op.type === 'get' ? '+' : '-';
            const proofPart = op.type === 'get' ? ` (${op.proof})` : '';

            lines.push(
                `<div class="report-line" data-idx="${idx}">` +
                `${sign}${op.name}: ${op.cost}$${proofPart}` +
                ` <span class="report-remove" title="Убрать">X</span>` +
                `</div>`
            );

            if (op.type === 'get') {
                total += op.cost;
                calcParts.push(`+ ${op.cost}`);
            } else {
                total -= op.cost;
                calcParts.push(`- ${op.cost}`);
            }
        });

        let calcLine = calcParts.join(' ').trim();
        if (calcLine.startsWith('+ ')) calcLine = calcLine.slice(2);

        lines.push(`<div class="report-total">подсчет: ${calcLine} = ${total}$</div>`);

        reportOutput.innerHTML = lines.join('\n');
        reportOutput.classList.add('show');

        // Удаление по крестику
        reportOutput.querySelectorAll('.report-remove').forEach(btn => {
            btn.addEventListener('click', (e) => {
                e.stopPropagation();
                const idx = parseInt(btn.closest('.report-line').dataset.idx);
                bankState.splice(idx, 1);
                renderReport();
            });
        });

        // Удаление по клику на строку
        reportOutput.querySelectorAll('.report-line').forEach(line => {
            line.addEventListener('click', (e) => {
                if (e.target.classList.contains('report-remove')) return;
                const idx = parseInt(line.dataset.idx);
                bankState.splice(idx, 1);
                renderReport();
            });
        });
    }

    // Клик по операциям
    document.querySelectorAll('.op-item').forEach(el => {
        el.addEventListener('click', function() {
            const type = this.dataset.type;
            const name = this.dataset.name;
            const cost = parseFloat(this.dataset.cost);

            // ДОХОД → показываем textarea
if (type === 'get') {
    const existing = this.querySelector('.proof-wrap');

    // 👉 если уже открыт — закрываем
    if (existing) {
        existing.remove();
        return;
    }

    const wrap = document.createElement('div');
    wrap.className = 'proof-wrap';
    wrap.style.marginTop = '5px';

    wrap.innerHTML = `
        <textarea class="proof-input" placeholder="Ссылки..." rows="2"></textarea>
        
        <div style="margin-top:5px; display:flex; gap:10px; align-items:center;">
            <label>кол-во: 
                <input type="number" class="proof-count" value="1" min="1" style="width:50px;">
            </label>

            <label style="display:flex; align-items:center; gap:4px;">
                <input type="checkbox" class="proof-mult">
                x2
            </label>
        </div>
    `;

    this.appendChild(wrap);

    const textarea = wrap.querySelector('.proof-input');
    const countInput = wrap.querySelector('.proof-count');
    const multCheckbox = wrap.querySelector('.proof-mult');
    const discountCheckbox = wrap.querySelector('.proof-discount');

    textarea.focus();

    const save = () => {
        const proof = textarea.value.trim() || 'нет ссылки';
        let count = parseInt(countInput.value) || 1;

        let finalCost = cost * count;

        if (multCheckbox.checked) finalCost *= 2;
        if (discountCheckbox.checked) finalCost *= 0.5;

        bankState.push({
            id: Date.now() + Math.random(),
            type,
            name: `${name} x${count}`,
            cost: finalCost,
            proof
        });

        wrap.remove();
        renderReport();
    };
                };


            // РАСХОД → сразу добавляется
            bankState.push({
                id: Date.now() + Math.random(),
                type,
                name,
                cost,
                proof: ''
            });

            this.classList.add('added');
            setTimeout(() => this.classList.remove('added'), 250);

            renderReport();
        });
    });

    // Кнопка "В форму ответа"
    replyBtn?.addEventListener('click', () => {
        if (!bankState.length) return alert('ничего не выбрано.');

        let text = [];
        let total = 0;

        bankState.forEach(op => {
            const sign = op.type === 'get' ? '+' : '-';
            const proofPart = op.type === 'get' ? ` (${op.proof})` : '';
            text.push(`${sign}${op.name}: ${op.cost}$${proofPart}`);
            total += op.type === 'get' ? op.cost : -op.cost;
        });

        let calcParts = bankState.map(op => {
            const s = op.type === 'get' ? '+' : '-';
            return `${s} ${op.cost}`;
        });

        let calcLine = calcParts.join(' ').replace(/^\+ /, '');
        text.push(`подсчет: ${calcLine} = ${total}$`);

        const finalText = text.join('\n');

        if (replyArea) {
            replyArea.value = replyArea.value.trim()
                ? replyArea.value + '\n\n' + finalText
                : finalText;

            replyArea.focus();
            replyArea.style.outline = '2px solid #4caf50';
            setTimeout(() => replyArea.style.outline = '', 800);
        } else {
            navigator.clipboard?.writeText(finalText).then(() => {
                alert('Форма не найдена, но отчёт скопирован в буфер!');
            });
        }
    });

    renderReport();
});
})();

</script>

test skadi

Меню навигации

Пользовательские ссылки

Информация о пользователе

банк банк банк

Сообщений 1 страница 2 из 2

Поделиться12026-06-23 15:32:12

Поделиться22026-06-23 15:51:12