микрозайм

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Заявка на микрозайм</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .loan-form {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 300px;
            text-align: center;
        }

        .loan-input {
            width: 80%;
            margin: 10px auto;
            padding: 10px;
        }

        .loan-slider {
            width: 80%;
            margin: 10px auto;
        }

        .loan-result {
            margin-top: 20px;
        }

        .loan-button {
            background-color: #4caf50;
            color: #fff;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="loan-form">
        <h2>Заявка на микрозайм</h2>
        <label for="loanAmount">Сколько вам нужно:</label>
        <input type="text" id="loanAmount" class="loan-input" readonly>
        <input type="range" id="loanAmountSlider" class="loan-slider" min="1000" max="10000" step="1000" value="5000">

        <label for="loanTerm">На какой срок:</label>
        <input type="text" id="loanTerm" class="loan-input" readonly>
        <input type="range" id="loanTermSlider" class="loan-slider" min="7" max="30" value="14">

        <div class="loan-result">
            <p><strong>Общая сумма:</strong> <span id="totalAmount">5000</span> руб.</p>
            <p><strong>Процент:</strong> <span id="interestRate">10</span>%</p>
            <p><strong>К возврату:</strong> <span id="repaymentAmount">5500</span> руб.</p>
            <p><strong>Дата возврата:</strong> <span id="repaymentDate">01.01.2023</span></p>
        </div>

        <button class="loan-button" onclick="submitLoanApplication()">Получить заем</button>
    </div>

    <script>
        const loanAmountSlider = document.getElementById('loanAmountSlider');
        const loanAmountInput = document.getElementById('loanAmount');
        const loanTermSlider = document.getElementById('loanTermSlider');
        const loanTermInput = document.getElementById('loanTerm');
        const totalAmount = document.getElementById('totalAmount');
        const interestRate = document.getElementById('interestRate');
        const repaymentAmount = document.getElementById('repaymentAmount');
        const repaymentDate = document.getElementById('repaymentDate');

        loanAmountSlider.addEventListener('input', updateLoanAmount);
        loanTermSlider.addEventListener('input', updateLoanTerm);

        function updateLoanAmount() {
            const amount = loanAmountSlider.value;
            loanAmountInput.value = amount;
            updateLoanSummary();
        }

        function updateLoanTerm() {
            const term = loanTermSlider.value;
            loanTermInput.value = term;
            updateLoanSummary();
        }

        function updateLoanSummary() {
            const amount = parseInt(loanAmountSlider.value);
            const term = parseInt(loanTermSlider.value);
            const rate = calculateInterestRate(amount, term);

            totalAmount.textContent = amount;
            interestRate.textContent = rate;
            repaymentAmount.textContent = calculateRepaymentAmount(amount, rate);
            repaymentDate.textContent = calculateRepaymentDate(term);
        }

        function calculateInterestRate(amount, term) {
            // Пример простого расчета процентов (можно заменить своей логикой)
            return Math.round((amount * term) / 1000);
        }

        function calculateRepaymentAmount(amount, rate) {
            return amount + rate;
        }

        function calculateRepaymentDate(term) {
            const currentDate = new Date();
            const repaymentDate = new Date();
            repaymentDate.setDate(currentDate.getDate() + term);
            return repaymentDate.toLocaleDateString();
        }

        function submitLoanApplication() {
            alert('Заявка отправлена!');
        }
    </script>
</body>
</html>