<?php 
include "admin/conn.php";

if (isset($_POST["submit"])) {
    $username = $_POST["username"];
    $email = $_POST["email"];
    $password = $_POST["password"];
    $confirmPassword = $_POST["confirm_password"];

    // Check for empty fields
    if (empty($username) || empty($email) || empty($password) || empty($confirmPassword)) {
        echo "<script>alert('Please fill in all fields.');</script>";
    } else {
        // Check if username or email already exists
        $duplicate = mysqli_query($conn, "SELECT * FROM tb_user WHERE username = '$username' OR email = '$email'");

        if (mysqli_num_rows($duplicate) > 0) {
            echo "<script>alert('Username or Email already exists.');</script>";
        } else {
            if ($password === $confirmPassword) {
                // Hash the password for security
                $hashedPassword = password_hash($password, PASSWORD_DEFAULT);

                // Insert user data into the database
                $query = "INSERT INTO tb_user (username, email, password) VALUES ('$username', '$email', '$hashedPassword')";
                $result = mysqli_query($conn, $query);

                if ($result) {
                    echo "<script>alert('Registration successful.');</script>";
                    echo "<script>window.location.href = 'login.php';</script>";
                    exit();
                } else {
                    echo "<script>alert('Registration failed. Please try again.');</script>";
                }
            } else {
                echo "<script>alert('Passwords do not match.');</script>";
            }
        }
    }
}
?>

<!-- Redesigned Modern Popup Signup Form -->
<div id="popupForm" style="display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100vw; height: 100vh; overflow: auto; background: linear-gradient(135deg, rgba(30, 30, 60, 0.95) 60%, rgba(242, 110, 101, 0.85) 100%);">
    <div style="background: #232347;margin: 5% auto;padding: 0;border-radius: 18px;width: 100%;max-width: 600px;box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);border: none;position: relative;overflow: hidden;">
        <div style="background: linear-gradient(90deg, #f26e65 0%, #ffb86c 100%); padding: 32px 0 16px 0; text-align: center;">
            <span class="close-button" onclick="closePopup()" style="color: #fff; position: absolute; right: 24px; top: 18px; font-size: 32px; font-weight: bold; cursor: pointer; opacity: 0.8; transition: opacity 0.2s;">&times;</span>
            <img src="https://img.icons8.com/fluency/48/like.png" alt="Sign Up" style="margin-bottom: 10px;">
            <h2 style="color: #fff; margin: 0; font-weight: 700; letter-spacing: 1px;">Join Free Now!</h2>
            <p style="color: #fff; margin: 8px 0 0 0; font-size: 15px; opacity: 0.85;">Meet new people &amp; start your journey</p>
        </div>
        <form method="POST" onsubmit="return validateForm();" style="padding: 32px 32px 24px 32px;">
            <div style="margin-bottom: 18px;">
                <label for="username" style="color: #fff; font-size: 14px; font-weight: 500;">Username</label>
                <div style="position: relative;">
                    <input type="text" name="username" id="username" required autocomplete="off"
                        style="width: 100%; padding: 12px 40px 12px 14px; border-radius: 8px; border: 1px solid #3a3a5d; background: #29294d; color: #fff; font-size: 15px; margin-top: 6px;">
                    <span style="position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #f26e65;">
                        <i class="fa fa-user"></i>
                    </span>
                </div>
            </div>
            <div style="margin-bottom: 18px;">
                <label for="email" style="color: #fff; font-size: 14px; font-weight: 500;">Email</label>
                <div style="position: relative;">
                    <input type="email" id="email" name="email" required autocomplete="off"
                        style="width: 100%; padding: 12px 40px 12px 14px; border-radius: 8px; border: 1px solid #3a3a5d; background: #29294d; color: #fff; font-size: 15px; margin-top: 6px;">
                    <span style="position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #f26e65;">
                        <i class="fa fa-envelope"></i>
                    </span>
                </div>
            </div>
            <div style="margin-bottom: 18px;">
                <label for="password" style="color: #fff; font-size: 14px; font-weight: 500;">Password</label>
                <div style="position: relative;">
                    <input type="password" name="password" id="password" required
                        style="width: 100%; padding: 12px 40px 12px 14px; border-radius: 8px; border: 1px solid #3a3a5d; background: #29294d; color: #fff; font-size: 15px; margin-top: 6px;">
                    <span style="position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #f26e65;">
                        <i class="fa fa-lock"></i>
                    </span>
                </div>
            </div>
            <div style="margin-bottom: 18px;">
                <label for="confirmPassword" style="color: #fff; font-size: 14px; font-weight: 500;">Confirm Password</label>
                <div style="position: relative;">
                    <input type="password" name="confirm_password" id="confirmPassword" required
                        style="width: 100%; padding: 12px 40px 12px 14px; border-radius: 8px; border: 1px solid #3a3a5d; background: #29294d; color: #fff; font-size: 15px; margin-top: 6px;">
                    <span style="position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #f26e65;">
                        <i class="fa fa-lock"></i>
                    </span>
                </div>
            </div>
            <div style="margin-bottom: 18px;">
                <label for="location" style="color: #fff; font-size: 14px; font-weight: 500;">My Location</label>
                <div style="position: relative;">
                    <input type="text" name="location" id="location"
                        style="width: 100%; padding: 12px 40px 12px 14px; border-radius: 8px; border: 1px solid #3a3a5d; background: #29294d; color: #fff; font-size: 15px; margin-top: 6px;">
                    <span style="position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #f26e65;">
                        <i class="fa fa-map-marker"></i>
                    </span>
                </div>
            </div>
            <div style="display: flex; align-items: center; margin-bottom: 16px;">
                <input type="checkbox" id="termsCheckbox" name="termsCheckbox" style="margin-right: 10px;">
                <label for="termsCheckbox" style="color: #fff; font-size: 13px;">I agree to the <a href="term.php" style="color: #f26e65; text-decoration: underline;">Terms &amp; Conditions</a></label>
            </div>
            <button type="submit" name="submit" class="submit-btn"
                style="width: 100%; background: linear-gradient(90deg, #f26e65 0%, #ffb86c 100%); color: #fff; padding: 13px 0; border: none; border-radius: 10px; font-size: 17px; font-weight: 700; letter-spacing: 1px; box-shadow: 0 2px 8px rgba(242,110,101,0.15); transition: background 0.2s; cursor: pointer;">
                Start Now
            </button>
            <p style="text-align: center; color: #bdbddd; font-size: 13px; margin-top: 18px;">Already a member? <a href="login.php" style="color: #f26e65; text-decoration: underline;">Sign In</a></p>
        </form>
    </div>
</div>
<!-- Font Awesome CDN for icons (if not already included) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const dropdowns = document.querySelectorAll("select");
        dropdowns.forEach(dropdown => {
            dropdown.addEventListener("change", function () {
                console.log(`Selected value: ${this.value}`);
            });
        });
    });
</script>

<script>
function validateForm() {
    var username = document.getElementById('username').value.trim();
    var email = document.getElementById('email').value.trim();
    var password = document.getElementById('password').value.trim();
    var confirmPassword = document.getElementById('confirmPassword').value.trim();

    if (!username || !email || !password || !confirmPassword) {
        alert('Please fill in all fields.');
        return false;
    }

    if (password !== confirmPassword) {
        alert('Passwords do not match.');
        return false;
    }

    return true;
}

window.onload = function() {
    setTimeout(function() {
        if (!localStorage.getItem('popupShown')) {
            openPopup();
            localStorage.setItem('popupShown', 'true');
        }
    }, 10000); // 10 seconds delay
};
</script>

<script>
    // Function to open the modal
    function openPopup() {
        var modal = document.getElementById("popupForm");
        modal.style.display = "block";
    }

    // Get the element that closes the modal
    var span = document.getElementsByClassName("close-button")[0];

    // Close the modal when the user clicks on <span> (x)
    span.onclick = function() {
        var modal = document.getElementById("popupForm");
        modal.style.display = "none";
    }

    // Close the modal if the user clicks outside of it
    window.onclick = function(event) {
        var modal = document.getElementById("popupForm");
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
</script>
  <!-- index four footer wrapper start -->

<section>
    <footer>
        <div class="ind4-footer" style="background-color: #383838;">
            <div class="container" style="margin-top: 5px;">
                <div class="row" style="padding-bottom: 27px;">
                    <div class="col-12 col-md-12 col-lg-12">
                        <div class="ind4-footer-box-1">
                            <div class="row">
                                <div class="col-12 col-lg-9">
                                    <div class="ind4-footer-box-1">
                                        <div style="margin-top: 10px; color: #fff; font-size: 13px; line-height: 1.6;">
                                            <strong style="color:#fff;">Images and videos are for illustrative purposes only.</strong> Not all persons depicted are actual users.<br>
                                            <strong style="color:#fff;">flirt.com</strong> does not perform background checks on its members.<br><br>
                                            <a href="dispute.php" target="_blank" style="color:#fff; text-decoration:underline;"><strong style="color:#fff;">Conflict Resolution</strong></a> | 
                                            <a href="disclaimer.php" style="color:#fff; text-decoration:underline;"><strong style="color:#fff;">Legal Disclaimer</strong></a> | 
                                            <a href="contact.php" style="color:#fff; text-decoration:underline;"><strong style="color:#fff;">Contact Us</strong></a> | 
                                            <a href="18+.php" style="color:#fff; text-decoration:underline;"><strong style="color:#fff;">18+ Content Compliance Statement</strong></a><br><br>
                                            This website is operated by Flirt LLC, 12 Rue de la Paix, 75002 Paris, France. For support, contact us at info@flirt.com.<br>
                                            <strong style="color:#fff;">&copy; <?php echo date('Y'); ?> Flirt LLC. All rights reserved.</strong>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-lg-3">
                                    <div class="ind4-footer-box-3" style="text-align: left; margin-left: 0;">
                                        <div style="font-weight: bold; color: #fff; font-size: 14px; margin-bottom: 10px;">
                                            Questions? Call us: +33 65 874 41354
                                        </div>
                                        <ul style="font-size: 12px; line-height: 2; display: block; list-style: none; padding: 0; margin: 0;">
                                            <li style="font-weight: 500;">
                                                <a href="privacy.php" style="color: #fff; text-decoration: none; font-weight: bold;">Privacy Policy</a>
                                            </li>
                                            <li style="font-weight: 500;">
                                                <a href="term.php" style="color: #fff; text-decoration: none; font-weight: bold;">Terms & Conditions</a>
                                            </li>
                                            <li style="font-weight: 500;">
                                                <a href="refund.php" style="color: #fff; text-decoration: none; font-weight: bold;">Refund Policy</a>
                                            </li>
                                            <li style="font-weight: 500;">
                                                <a href="community.php" style="color: #fff; text-decoration: none; font-weight: bold;">Community Standards</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div><!-- .row -->
                        </div><!-- .ind4-footer-box-1 -->
                    </div><!-- .col-12 -->
                </div><!-- .row -->
            </div><!-- .container -->
        </div><!-- .ind4-footer -->
    </footer>
</section>
<!-- index four footer wrapper end -->
<script src="js/jquery-3.6.0.min.js"></script>
<!--<script src="js/jquery-ui.min.js"></script>-->
<script src="js/bootstrap.min.js"></script>
<script>
    $(document).ready(function () {
        // Ensure dropdowns are initialized
        $('.dropdown-toggle').dropdown();
    });
</script>
<script src="js/bootstrap.bundle.js"></script>
<script src="js/owl.carousel.js"></script>
<script src="js/range-slider.js"></script>
<!--<script src="js/jquery.themepunch.tools.min.js"></script>-->
<!--<script src="js/jquery.themepunch.revolution.min.js"></script>-->
<script src="js/custom.js"></script>
<!-- animation js start -->
<script>
    $(document).on("scroll", function() {
        var pageTop = $(document).scrollTop()
        var pageBottom = pageTop + $(window).height()
        var tags = $(".fadein")

        for (var i = 0; i < tags.length; i++) {
            var tag = tags[i]

            if ($(tag).offset().top < pageBottom) {
                $(tag).addClass("visible")
            } else {
                $(tag).removeClass("visible")
            }
        }
    })
</script>
</body>
<!-- Mirrored from webstrot.com/html/fervor/html/index4.html by HTTrack Website Copier/3.x [XR&CO'2014], Thu, 18 Apr 2024 11:29:04 GMT -->
</html>
