One Hat Cyber Team

View File Name : index.php

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title></title>
    <link rel="shortcut icon" href="assets/images/favicon.png">

    <!-- fraimwork - css include -->
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">

    <!-- icon css include -->
    <link rel="stylesheet" type="text/css" href="assets/css/fontawesome-all.css">
     <link
        rel="stylesheet"
        href="https://site-assets.fontawesome.com/releases/v6.5.1/css/all.css"
      >

    <!-- carousel css include -->
    <link rel="stylesheet" type="text/css" href="assets/css/slick.css">
    <link rel="stylesheet" type="text/css" href="assets/css/slick-theme.css">
    <link rel="stylesheet" type="text/css" href="assets/css/animate.css">
    <link rel="stylesheet" type="text/css" href="assets/css/owl.carousel.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/owl.theme.default.min.css">

    <!-- others css include -->
    <link rel="stylesheet" type="text/css" href="assets/css/magnific-popup.css">
    <link rel="stylesheet" type="text/css" href="assets/css/jquery.mCustomScrollbar.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/calendar.css">

    <!-- custom css include -->
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">


</head>
<style>
.form-group {
    margin-bottom: var(--bs-gutter-x);
    position: relative;
}

.form-group>i {
    position: absolute;
    right: 30px;
    top: 20px;
    font-size: 18px;
    color: #656565;
}
</style>

<body class="homepage2">



    <header id="header-section" class="header-section sticky-header-section not-stuck clearfix">
        <!-- header-bottom - start -->
        <div class="header-bottom">
            <div class="container">
                <div class="row">

                    <!-- site-logo-wrapper - start -->
                    <div class="col-lg-3">
                        <div class="site-logo-wrapper">
                            <a href="index.php" class="logo">
                                <p style="color:#ffa500;">CHS</p>
                                <!--<img src="assets/images/1.site-logo.png" alt="logo_not_found">-->
                            </a>
                        </div>
                    </div>
                    <!-- site-logo-wrapper - end -->

                    <!-- mainmenu-wrapper - start -->
                    <div class="col-lg-9">
                        <div class="mainmenu-wrapper">
                            <div class="row">

                                <!-- menu-item-list - start -->
                                <div class="col-lg-10">
                                    <div class="menu-item-list ul-li clearfix">
                                        <ul>
                                            <li class="menu-item-has-children active">
                                                <a href="index.php">home</a>

                                            </li>
                                            <!--<li>-->
                                            <!--    <a href="index.php#about-section">about</a>-->

                                            <!--</li>-->
                                            
                                            <!--<li>-->
                                            <!--    <a href="index.php#event-section">Events</a>-->

                                            <!--</li>-->
                                            <!--<li>-->
                                            <!--    <a href="index.php#members-section">Members</a>-->

                                            <!--</li>-->

                                           

                                            <li>
                                                <a href="index.php#contact-section">contact</a>

                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <!-- menu-item-list - end -->

                                <!-- menu-item-list - start -->
                                <div class="col-lg-2">
                                    <div class="user-search-btn-group ul-li clearfix">
                                        <ul>
                                            <?php 
                                    if(isset($_SESSION['USER_LOGIN'])){
                                        ?>
                                            <li>
                                                <button type="button" class="toggle-overlay search-btn">
                                                    <i class="fa fa-user"></i>
                                                </button>
                                                <!-- search-body - start -->
                                                <div class="search-body">
                                                     <div class="search-form">
                                                        <a href="admin">Admin Login</a>
                                                    </div>
                                                    <div class="search-form">
                                                        <a href="logout.php">logout</a>
                                                    </div>
                                                </div>
                                                <!-- search-body - end -->
                                            </li>

                                            <?php }
                                            else{
                                                
                                                ?>
                                            <li>
                                                <button type="button" class="toggle-overlay search-btn">
                                                    <i class="fa fa-user"></i>
                                                </button>
                                                <!-- search-body - start -->
                                                <div class="search-body">
                                                    <!--<div class="search-form">-->
                                                    <!--    <a target="_blank" href="admin">Admin Login</a>-->
                                                    <!--</div>-->
                                                    
                                                    <div class="search-form">
                                                        <a href="index.php">Login</a>
                                                    </div>
                                                </div>
                                                <!-- search-body - end -->
                                            </li>

                                            <?php 
                                            }
                                            
                                            ?>
                                        </ul>
                                    </div>
                                </div>
                                <!-- menu-item-list - end -->

                            </div>
                        </div>
                    </div>
                    <!-- mainmenu-wrapper - end -->

                </div>
            </div>
        </div>
        <!-- header-bottom - end -->
    </header>





    <!-- slide-section - start
		================================================== -->
    <section id="main-carousel2" class="main-carousel2 clearfix">

        <div class="item" style="background-image: url(assets/images/BG.jpg);">
            <div class="overlay-black">
                <div class="container">
                    <div class="row align-items-center">



                        <!-- slider-content - start -->
                        <div class="col-lg-7 col-md-12 col-sm-12">
                            <div class="slider-content">


                                <h6 style="font-size:40px;" class="title-text">
                                    Welcome to the website for <span style="color:orange;">Jimmy Park 2</span> Co-operative Housing Society Ltd.
                                <h6>
                                    <p style="font-size:17px;color:white;" >This is a members only website. Please login using your login credentials if you are a member. If you are a visitor and would like to contact the society, please drop us an enquiry using the contact form.</p>
                            </div>
                        </div>
                        <!-- slider-content - end -->


                        <!-- reg-form - start -->
                        <div class="col-lg-5 col-md-12 col-sm-12">
                            <div class="reg-form" id="loginForm">

                                <div class="from-title">
                                    <h2 class="title-text"><strong>Login</strong> now</h2>
                                    <div class="sub-title">Login to engage with the society </div>
                                </div>
 
                                <script src="https://www.google.com/recaptcha/api.js" async defer></script>
                                <div class="form-wrapper mb-30">
                                   <form id="loginForm" action="process_login.php" method="post">
    <div class="form-item">
        <input id="phone" type="number" name="phone" placeholder="Phone" required>
    </div>
    <div class="form-item form-group">
        <input id="password" type="password" name="password" placeholder="Password" required>
        <i id="eyeIcon" class="fa fa-eye-slash" onclick="togglePasswordVisibility1()"></i>
    </div>
    <div class="form-item">
        <img src="captcha.php" alt="CAPTCHA">
        <input type="text" name="captcha_answer" placeholder="Enter CAPTCHA answer" required>
    </div>
    <button type="submit" class="submit-btn custom-btn">Login Now</button>
    <div class="or-text mt-5 mb-5">
        <span>or not set password</span>
    </div>
    <a href="Set-Password.php" id="resetPassword">Set Password?</a>
</form>

                                </div>

                            </div>

                       

                        </div>
                        <!-- reg-form - end -->


                    </div>
                </div>
            </div>
        </div>



    </section>
    <!-- slide-section - end
		================================================== -->


 


  <!-- Contact Section with Contact Form -->
 <section id="contact-section" class="contact-section sec-ptb-100 clearfix">
        <div class="container text-center" bis_skin_checked="1">

            <!-- section-title - start -->
            <div class="section-title mb-50" bis_skin_checked="1">
                <small class="sub-title">contact us</small>
                <h2 class="big-title">Keep in touch <strong>with Our Society</strong></h2>
            </div>
            <!-- section-title - end -->
            
            <h4 class="text-center">If You Are A Visitor And Would To Contact The Society, <br>
            Please Drop Us An Enquiry At <br>
            <a href="jimmypark2chs@gmail.com">jimmypark2chs@gmail.com</a></h4>

            <!-- contact-form - start -->
            <!--<div class="contact-form form-wrapper text-center" bis_skin_checked="1">-->

            <!--    <div class="statusMsg"></div>-->
            <!--    <form id="contactForm" method="post" action="send-mail.php" class="scroll-form" novalidate>-->
            <!--        <div id=""></div>-->
            <!--        <div class="row">-->
            <!--            <div class="col-lg-4 col-md-6 col-sm-12">-->
            <!--                <div class="form-item">-->
            <!--                    <input type="text" placeholder="Your Name" name="name" id="name" required>-->
            <!--                </div>-->
            <!--            </div>-->
            <!--            <div class="col-lg-4 col-md-6 col-sm-12">-->
            <!--                <div class="form-item">-->
            <!--                    <input type="email" placeholder="Email Address" name="email" id="email" required>-->
            <!--                </div>-->
            <!--            </div>-->
            <!--            <div class="col-lg-4 col-md-6 col-sm-12">-->
            <!--                <div class="form-item">-->
            <!--                    <input type="number" placeholder="Phone Number" name="phone" id="phone1" required>-->
            <!--                </div>-->
            <!--            </div>-->
            <!--            <div class="col-lg-12 col-md-12 col-sm-12">-->
            <!--                <textarea placeholder="Your Message" name="msg" id="msg"></textarea>-->
            <!--                <button type="submit" name="submit" id="whatsAppAnyForm" class="custom-btn submitBtn">Send Message</button>-->
            <!--            </div>-->
            <!--        </div>-->
            <!--    </form>-->
                
                
            <!--</div>-->
            <!-- contact-form - end -->

        </div>
    </section>




    <?php include('footer.php')?>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  
   
    

    <!-- fraimwork - jquery include -->
    <script src="assets/js/jquery-3.3.1.min.js"></script>
    <script src="assets/js/popper.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>

    <!-- carousel jquery include -->
    <script src="assets/js/slick.min.js"></script>
    <script src="assets/js/owl.carousel.min.js"></script>

    <!-- map jquery include -->
    <script src="assets/js/gmap3.min.js"></script>
    <script src="http://maps.google.com/maps/api/js?key=AIzaSyC61_QVqt9LAhwFdlQmsNwi5aUJy9B2SyA"></script>

    <!-- calendar jquery include -->
    <script src="assets/js/atc.min.js"></script>

    <!-- others jquery include -->
    <script src="assets/js/jquery.magnific-popup.min.js"></script>
    <script src="assets/js/isotope.pkgd.min.js"></script>
    <script src="assets/js/jarallax.min.js"></script>
    <script src="assets/js/jquery.mCustomScrollbar.concat.min.js"></script>

    <!-- gallery img loaded - jqury include -->
    <script src="assets/js/imagesloaded.pkgd.min.js"></script>

    <!-- multy count down - jqury include -->
    <script src="assets/js/jquery.countdown.js"></script>



    <!-- custom jquery include -->
    <script src="assets/js/custom.js"></script>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

   

    <script>
    function togglePasswordVisibility1() {
        var passwordInput = document.getElementById("password");
        var eyeIcon = document.getElementById("eyeIcon");

        if (passwordInput.type === "password") {
            passwordInput.type = "text";
            eyeIcon.classList.remove("fa-eye-slash");
            eyeIcon.classList.add("fa-eye");
        } else {
            passwordInput.type = "password";
            eyeIcon.classList.remove("fa-eye");
            eyeIcon.classList.add("fa-eye-slash");
        }
    }
    </script>
    
    <script>
 $(document).ready(function() {
    $('#loginForm').submit(function(e) {
        e.preventDefault();
        
        var phone = $('#phone').val();
        var password = $('#password').val();
        var captcha_answer = $('input[name="captcha_answer"]').val();

        // AJAX call
        $.ajax({
            url: 'login_process.php',
            type: 'POST',
            data: {
                phone: phone,
                password: password,
                captcha_answer: captcha_answer
            },
            success: function(response) {
                // Trim the response to remove any leading or trailing whitespace
                response = response.trim();

                if (response === 'success') {
                    window.location.href = 'dashboard.php'; // Redirect on successful login
                } else if (response === 'captcha_invalid') {
                    Swal.fire({
                        title: 'Error!',
                        text: 'Invalid CAPTCHA. Please try again.',
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                } else {
                    Swal.fire({
                        title: 'Error!',
                        text: 'Incorrect login details. Please try again.',
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                }
            }
        });
    });
});

</script>


     <script>
//     $(document).ready(function() {
//         $('#loginnow').click(function(e) {
//             e.preventDefault();
//             $('#setPasswordForm').hide();
//             $('#loginForm').show();
//         });

//         $('#loginForm').submit(function(e) {
//             e.preventDefault();
            
//             // Get the CAPTCHA response
//             // var captchaResponse = grecaptcha.getResponse();

//             // // Verify if CAPTCHA is successfully completed
//             // if (!captchaResponse) {
//             //     // If CAPTCHA is not completed, show an error message
//             //     Swal.fire({
//             //         title: 'Error!',
//             //         text: 'Please complete the CAPTCHA verification.',
//             //         icon: 'error',
//             //         confirmButtonText: 'OK'
//             //     });
//             //     return; // Exit function
//             // }
            
            
//             var phone = $('#phone').val();
//             var password = $('#password').val();

//             // AJAX call
//             $.ajax({
//                 url: 'login_process.php',
//                 type: 'POST',
//                 data: {
//                     phone: phone,
//                     password: password
//                 },
//                 success: function(response) {
//                     // Trim the response to remove any leading or trailing whitespace
//                     response = response.trim();

//                     // Check the response from the server
//                     if (response === 'success') {
//                         // Display success message
//                         Swal.fire({
//                             title: 'Success!',
//                             text: 'Login successful',
//                             icon: 'success',
//                             confirmButtonText: 'Go to Dashboard'
//                         }).then((result) => {
//                             if (result.isConfirmed) {
//                                 window.location.href = 'dashboard.php';
//                             }
//                         });
//                     } else {
//                       Swal.fire({
//     title: 'Error!',
//     text: 'Incorrect login details. Please try again.',
//     icon: 'error',
//     confirmButtonText: 'OK'
// });

//                     }
//                 }

//             });
//         });
//     });
//     </script>


<script>
    document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('whatsAppAnyForm');
    const emailInput = document.getElementById('email');
    const phoneInput = document.getElementById('phone');
    const responseDiv = document.getElementById('whatsappFormResponse');

    form.addEventListener('submit', function (event) {
        event.preventDefault(); // Prevent form submission

        let isValid = true;
        responseDiv.innerHTML = '';

        // Validate email
        const emailValue = emailInput.value;
        if (!validateEmail(emailValue)) {
            isValid = false;
            emailInput.classList.add('is-invalid');
            responseDiv.innerHTML += '<p>Please enter a valid email address.</p>';
        } else {
            emailInput.classList.remove('is-invalid');
        }

        // Validate phone
        const phoneValue = phoneInput.value;
        if (!validatePhone(phoneValue)) {
            isValid = false;
            phoneInput.classList.add('is-invalid');
            responseDiv.innerHTML += '<p>Please enter a valid 10-digit phone number.</p>';
        } else {
            phoneInput.classList.remove('is-invalid');
        }

        // If valid, submit the form
        if (isValid) {
            form.submit();
        }
    });

    function validateEmail(email) {
        const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return re.test(email);
    }

    function validatePhone(phone) {
        const re = /^\d{10}$/;
        return re.test(phone);
    }
});

</script>

<script>
   $(document).ready(function() {
    // Function to validate email
    function validateEmail(email) {
        const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return re.test(email);
    }

    // Function to validate phone number
    function validatePhone(phone) {
        const re = /^\d{10}$/;
        return re.test(phone);
    }

    // Real-time validation
    $('#email, #phone').on('input', function() {
        const email = $('#email').val();
        const phone = $('#phone').val();
        let isValid = validateEmail(email) && validatePhone(phone);

        if (isValid) {
            $('#whatsappFormSubmit').removeAttr('disabled');
        } else {
            $('#whatsappFormSubmit').attr('disabled', 'disabled');
        }
    });

    // Submit form data via Ajax
    $("#whatsAppAnyForm").on('submit', function(e) {
        e.preventDefault();

        // Clear previous messages
        $('.statusMsg').html('');
        const responseDiv = $('#whatsappFormResponse');
        responseDiv.html('');

        // Get form values
        const email = $('#email').val();
        const phone = $('#phone').val();

        // Validate email and phone
        let isValid = true;

        if (!validateEmail(email)) {
            isValid = false;
            $('#email').addClass('is-invalid');
            responseDiv.append('<p>Please enter a valid email address.</p>');
        } else {
            $('#email').removeClass('is-invalid');
        }

        if (!validatePhone(phone)) {
            isValid = false;
            $('#phone').addClass('is-invalid');
            responseDiv.append('<p>Please enter a valid 10-digit phone number.</p>');
        } else {
            $('#phone').removeClass('is-invalid');
        }

        // If valid, proceed with AJAX request
        if (isValid) {
            $.ajax({
                type: 'POST',
                url: 'send-mail.php',
                data: new FormData(this),
                dataType: 'json',
                contentType: false,
                cache: false,
                processData: false,
                beforeSend: function() {
                    $('.submitBtn').attr("disabled", "disabled");
                    $('#whatsAppAnyForm').css("opacity", ".5");
                },
                success: function(response) {
                    $('.statusMsg').html('');
                    if (response.status == 1) {
                        $('#whatsAppAnyForm')[0].reset();
                        $('.statusMsg').html('<p class="alert alert-success">' + response.message + '</p>');
                    } else {
                        $('.statusMsg').html('<p class="alert alert-danger">' + response.message + '</p>');
                    }
                    $('#whatsAppAnyForm').css("opacity", "");
                    $(".submitBtn").removeAttr("disabled");
                }
            });
        }
    });
});

</script>
<script>
   document.getElementById('contactForm').addEventListener('submit', function(event) {
    event.preventDefault();
    var formData = new FormData(this);

    fetch('send-mail.php', {
        method: 'POST',
        body: formData
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok.');
        }
        return response.json();
    })
    .then(data => {
        if (data.status === 1) {
            Swal.fire({
                title: 'Success!',
                text: data.message,
                icon: 'success',
                confirmButtonText: 'OK'
            });
        } else {
            Swal.fire({
                title: 'Error!',
                text: data.message,
                icon: 'error',
                confirmButtonText: 'OK'
            });
        }
    })
    .catch(error => {
        console.error('There was an issue with the form submission:', error);
        Swal.fire({
            title: 'Error!',
            text: 'Something went wrong. Please try again later.',
            icon: 'error',
            confirmButtonText: 'OK'
        });
    });
});

    </script>

</body>

</html>