EVOLUTION-NINJA

Edit File: login_page.php

<!DOCTYPE html>
<html lang="en">

.loginpage{
        overflow-x: hidden;
}
.captha-generater{
    background: linear-gradient(135deg,#1e3a8a,#2563eb);
    padding: 12px 20px;
    margin: 10px auto;
    border-radius: 14px;
    color: #ffeb3b;
    font-size: 30px;
    font-weight: bold;
    font-family: 'Courier New', monospace;
    letter-spacing: 6px;
    text-align: center;
    width: 190px;
    user-select: none;
    position: relative;
    overflow: hidden;
    transform: skew(-4deg);
    box-shadow: 0px 6px 15px rgba(0,0,0,0.25);
    border: 2px solid white;
}

/* Input label */
.captcha-label{
    font-size:16px;
    font-weight:600;
    color:#222;
    margin-bottom:6px;
    display:block;
}

/* Red star */
.required-star{
    color:red;
    font-size:18px;
}
</style>

<body>

<div class="inpfields">
                        
<label class="captcha-label">
    Enter Captcha
    <span class="required-star">*</span>
</label>

</div>
                    </div>
                        <button type="submit" class="loginbutton" id="log-btn">Log In</button>
                    </form>
                </div>
            </div>

</div>

</section>

</body>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.10.8/dist/sweetalert2.all.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.10.8/dist/sweetalert2.min.css" rel="stylesheet">
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const eyechange = document.getElementById("togglepass");
        const togglepassword = document.querySelector(".passwordinput");

eyechange.addEventListener("click", function () {
            if (togglepassword.type === "password") {
                togglepassword.type = "text";
                eyechange.classList.remove("fa-eye-slash");
                eyechange.classList.add("fa-eye")
            }
            else {
                togglepassword.type = "password";
                eyechange.classList.remove("fa-eye");
                eyechange.classList.add("fa-eye-slash")

}
        })
    })
</script>
<script>
    $('.carousel').carousel({
  interval:4000
})
</script>

const formdata = new FormData($(this)[0]);
            const captcha = document.getElementById("image").textContent.trim(); // Use textContent instead of innerHTML
            const usercaptcha = document.getElementById('usercaptcha').value.trim();

if (captcha === usercaptcha) {
                $('#log-btn').text('Loading...').attr('disabled', 'disabled'); // Improved loading state
                $('#log-btn').removeAttr('disabled').text('Login');
                $.ajax({
                    type: 'POST',
                    url: '<?php echo base_url("login");?>',
                    data: formdata,
                    contentType: false,
                    processData: false,
                    success: function (response) {
                           if (response.result == 1) {
                            Swal.fire({
                                icon: "success",
                                title: response.message,
                                showConfirmButton: false,
                                timer: 1000,
                            }).then(function () {
                               window.location.href = response.redirect;
                            });
                        } else {
                            Swal.fire({
                                icon: "error",
                                title: response.message || "An error occurred.",
                            });
                        }
                    },
                    error: function (xhr, textStatus, errorThrown) {
                        console.error("AJAX Error:", textStatus, errorThrown);
                        $('#log-btn').removeAttr('disabled').text('Login'); // Reset button state
                        Swal.fire({
                            icon: "error",
                            title: "Something went wrong. Please try again later."
                        });
                    }
                });
            } else if (usercaptcha === '') {
                toastr.error('Please enter captcha');
            } else {
                toastr.error('Invalid captcha');
            }
        });
    });
</script>

function generate() {

document.getElementById("usercaptcha").value = "";

captcha = document.getElementById("image");

let uniquechar = "";

const randomchar =
        "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

for (let i = 0; i < 6; i++) {

uniquechar +=
            randomchar.charAt(
                Math.floor(Math.random() * randomchar.length)
            );
    }

// Random rotation effect
    let finalCaptcha = "";

for(let char of uniquechar){

let rotate = Math.floor(Math.random() * 30) - 15;
 
        finalCaptcha +=
        `<span style="
            display:inline-block;
            transform:rotate(${rotate}deg);
        ">${char}</span>`;
    }

captcha.innerHTML = finalCaptcha;
}

generate(); // Generate captcha on page load
</script>

</html>