result.html - master - UPSR/Calculator

result.html
349 строк9 KB
Strelkov_Andrey
Create: index.html, result.html, style.css
26 июн 2026, 15:57
26 июн 2026, 15:57ad7f0c9
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Итоги расчета</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="container">
    <div class="calculator-card result-card">

        <h1>Итоги расчета</h1>

    <div class="results-row">

    <div class="info-block side-card">
       <div class="card-header">
            <img id="logoLeft" class="payment-logo" alt="">
            <span id="nameLeft"></span>
        </div>

        <div class="result-amount-wrapper">
            <strong id="valueLeft" class="result-value"></strong>
        </div>

        <div class="card-footer">
            <div class="tariff-value" id="tariffLeft"></div>

            <div class="result-comment" id="commentLeft"></div>
        </div>
    </div>

    <div class="info-block winner-card">
          
        <div class="card-header">
            <img id="logoCenter" class="payment-logo" alt="">
            <span id="nameCenter"></span>
        </div>

        <div class="result-amount-wrapper">
            <strong id="valueCenter" class="result-value"></strong>
        </div>


        <div class="card-footer">

            <div class="tariff-value" id="tariffCenter"></div>

            <div class="result-comment" id="commentCenter"></div>

        </div>
    </div>

    <div class="info-block side-card">
        <div class="card-header">
            <img id="logoRight" class="payment-logo" alt="">
            <span id="nameRight"></span>
        </div>

        <div class="result-amount-wrapper">
            <strong id="valueRight" class="result-value"></strong>
        </div>

        <div class="card-footer">

            <div class="tariff-value" id="tariffRight"></div>

            <div class="result-comment-right" id="commentRight"></div>

        </div>
    </div>


</div>
<div class="calculation-summary">

    <div class="summary-title">
        Параметры расчета
    </div>

    <div class="summary-grid">

        <div class="summary-item">
            <span class="summary-label">Сумма операций</span>
            <span class="summary-value" id="summaryAmount"></span>
        </div>

        <div class="summary-item">
            <span class="summary-label">Период для расчета</span>
            <span class="summary-value" id="summaryPeriod"></span>
        </div>

        <div class="summary-item">
            <span class="summary-label">Вид деятельности</span>
            <span class="summary-value" id="summaryType"></span>
        </div>

    </div>

</div>
    <div class="result-disclaimer">
    Расчет выполнен на основании введенных данных и носит справочный характер.
    Полученные значения не являются официальным
    расчетом стоимости услуг или банковских комиссий. За точным расчетом обратитесь в обслуживающую кредитную организацию.
    </div>
    
</div>
<div class="result-actions">

    <a
        href="calculator.html"
        class="action-btn secondary-btn"
    >
        Новый расчет
    </a>

    <a
        href="index.html"
        class="action-btn primary-btn"
    >
        На главную
    </a>

</div>
<script>
const data = JSON.parse(
    localStorage.getItem('calcResult')
);
document.getElementById('summaryAmount').textContent =
    data.amountFormatted;

document.getElementById('summaryPeriod').textContent =
    data.periodName;

document.getElementById('summaryType').textContent =
    data.typeName;

const results = [
{
    name:'СБП',
    value:data.result.res_sbp,
    tariff:data.sbpTariff + '%'
},
{
    name:'Эквайринг',
    value:data.result.res_eq,
    tariff:data.eqTariff + '%*'
},
{
    name:'Цифровой рубль',
    value:data.result.res_dr,
    tariff:data.drTariff + '%'
}
];

function formatMoney(value, inp) {

    if (value >= 1000000000) {
        return (
            (value / 1000000000)
                .toFixed(2)
                .replace('.', ',')
            + ' млрд ₽'
        );
    }

    if (value >= 1000000) {
        return (
            (value / 1000000)
                .toFixed(2)
                .replace('.', ',')
            + ' млн ₽'
        );
    }

    if (inp >= 334) {
        return (
            value.toLocaleString(
                'ru-RU',
                { maximumFractionDigits: 0 }
            ) + ' ₽'
        );
    }

    return value.toFixed(2) + ' ₽';
}

document.getElementById('nameCenter').textContent =
    results[0].name;

const valueCenter =
    document.getElementById('valueCenter');

const valueLeft =
    document.getElementById('valueLeft');

const valueRight =
    document.getElementById('valueRight');

function fitResultValues() {

    const left = document.getElementById('valueLeft');
    const center = document.getElementById('valueCenter');
    const right = document.getElementById('valueRight');

    const sideValues = [left, right];

    const MIN_SIZE = 16;
    const MAX_SIZE = 28;

    let sideSize = MAX_SIZE;

    function fits(el, size) {

        const oldSize = el.style.fontSize;

        el.style.fontSize = size + 'px';

        const fits =
            el.scrollWidth <= el.clientWidth &&
            el.scrollHeight <= el.parentElement.clientHeight;

        el.style.fontSize = oldSize;

        return fits;
    }

    while (sideSize > MIN_SIZE) {

        const allFit = sideValues.every(
            el => fits(el, sideSize)
        );

        if (allFit) {
            break;
        }

        sideSize--;
    }

    left.style.fontSize = sideSize + 'px';
    right.style.fontSize = sideSize + 'px';

    const centerSize = Math.round(
        Math.min(sideSize * 1.15, MAX_SIZE + 4)
    );

    center.style.fontSize = centerSize + 'px';
}

valueCenter.textContent =
    formatMoney(results[0].value, data.amount);

valueRight.textContent =
    '0 ₽';

const minValue =
    formatMoney(data.result.res_eq_min, data.amount);

const maxValue =
    formatMoney(data.result.res_eq_max, data.amount);

valueLeft.innerHTML =
    `
    ${minValue}
    <br>
    —
    <br>
    ${maxValue}
    `;

requestAnimationFrame(() => {
    fitResultValues();
});

document.getElementById('nameLeft').textContent =
    results[1].name;

document.getElementById('nameRight').textContent =
    results[2].name;

document.getElementById('tariffCenter').textContent =
    'Тариф: ' + results[0].tariff;

document.getElementById('tariffLeft').textContent =
    'Тариф: ' + data.eqTariff_min + ' - ' + data.eqTariff_max + '%*';

document.getElementById('tariffRight').textContent =
    'Тариф: 0.0%*';

document.getElementById('commentCenter').textContent =
	'Наиболее выгодный вариант для выбранных параметров.';

document.getElementById('commentLeft').innerHTML =
    'С учетом НДС<br><br>' +
    '*Конкретный тариф зависит от банка, вашего оборота и условий договора.';

document.getElementById('commentRight').innerHTML =
    'Доступен с 1 сентября 2026 года. Подключение через <a href="https://www.cbr.ru/psystem/dr/accepting_payments_dr" target="_blank">банки-участники</a><br>*На расчеты в Цифровом рубле действует тариф 0% до 01.01.2027';

document.getElementById('logoCenter').src =
    'images/mini_logo_sbp.png';

document.getElementById('logoLeft').src =
    'images/equiring2.jpg';

document.getElementById('logoRight').src =
    'images/digital_ruble_red_logo.svg';

window.addEventListener(
    'resize',
    fitResultValues
);


/*results.sort((a, b) => a.value - b.value);

document.getElementById('nameCenter').textContent =
    results[0].name;

document.getElementById('valueCenter').textContent =
    results[0].value.toFixed(2) + ' ₽';

document.getElementById('nameLeft').textContent =
    results[1].name;

document.getElementById('valueLeft').textContent =
    results[1].value.toFixed(2) + ' ₽';

document.getElementById('nameRight').textContent =
    results[2].name;

document.getElementById('valueRight').textContent =
    results[2].value.toFixed(2) + ' ₽';

document.getElementById('commentCenter').textContent =
    'Наиболее выгодный вариант для выбранных параметров.';

document.getElementById('commentLeft').textContent =
    'Альтернативный способ расчетов.';

document.getElementById('commentRight').textContent =
    'Наименее выгодный вариант по результатам расчета.';*/
</script>

</body>
</html>