contact.html

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

<head>
    <meta charset="utf-8">
    <title>Ezyshop</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="Free HTML Templates" name="keywords">
    <meta content="Free HTML Templates" name="description">
    <link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">

    <!-- Favicon -->
    <link href="img/favicon.ico" rel="icon">

    <!-- Google Web Fonts -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Handlee&family=Nunito&display=swap" rel="stylesheet">

    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">


    <!-- Flaticon Font -->
    <link href="lib/flaticon/font/flaticon.css" rel="stylesheet">

    <!-- Libraries Stylesheet -->
    <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
    <link href="lib/lightbox/css/lightbox.min.css" rel="stylesheet">

    <!-- Customized Bootstrap Stylesheet -->
    <link href="css/style.css" rel="stylesheet">
    <link rel="stylesheet" href="css\footer.css">

    <link rel="stylesheet" href="css/newsLetter.css">
</head>

<body>
    <!-- Navbar Start -->
    <div class="container-fluid bg-light position-relative shadow">
        <nav class="navbar navbar-expand-lg bg-light navbar-light py-3 py-lg-0 px-0 px-lg-5">
            <a href="index.html" class="navbar-brand font-weight-bold text-secondary" style="font-size: 50px;">
                <img style="width: 80px;" src="./img/ezyshop.png" alt="logo">
                <span class="text-primary">Ezyshop</span>
            </a>
            <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-between" id="navbarCollapse">
                <div class="navbar-nav font-weight-bold mx-auto py-0">
                    <a href="index.html" class="nav-item nav-link active" id="secondary">Home</a>
                    <a href="about.html" class="nav-item nav-link">About</a>
                    <a href="category.html" class="nav-item nav-link">Categories</a>
                    <a href="team.html" class="nav-item nav-link">Teams</a>
                    <div class="nav-item dropdown">
                        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Pages</a>
                        <div class="dropdown-menu rounded-0 m-0">
                            <a href="blog.html" class="dropdown-item">Blog Grid</a>
                            <a href="single.html" class="dropdown-item">Blog Detail</a>
                        </div>
                    </div>
                    <a href="contact.html" class="nav-item nav-link" id="primary">Contact Us</a>
                </div>
                <a id="authButton" href="RegisterPages/register.html" class="btn btn-primary px-4">Login / Sign Up</a>
            </div>
        </nav>
    </div>
    <!-- Navbar End -->


    <!-- Header Start -->
   <div class="d-flex justify-content-center align-items-center container-fluid bg-primary" style="min-height: 400px;">
    <div class="d-flex flex-column align-items-center justify-content-center">
        <h3 class="display-3 font-weight-bold text-white">Contact Us</h3>
        <div class="d-inline-flex text-white pb-3">
            <p class="m-0"><a class="text-white" href="">Home</a></p>
            <p class="m-0 px-2">/</p>
            <p class="m-0"><a class="text-white" href="">Contact Us</a></p>
        </div>
    </div>
</div>
    <!-- Header End -->


    <!-- Contact Start -->
    <div class="container-fluid pt-5">
        <div class="container">
            <div class="text-center pb-2">
                <p class="section-title px-5 mb-4"><span class="px-2">Get In Touch</span></p>
                <h1 class="mb-4">Contact Us For Any Query</h1>
            </div>
            <div class="row">
                <div class="col-lg-7 mb-5">
                    <div class="contact-form">
                        <div id="success"></div>
                        <form name="sentMessage" id="contactForm" novalidate="novalidate">
                            <div class="control-group">
                                <input type="text" class="form-control" id="name" placeholder="Your Name"
                                    required="required" data-validation-required-message="Please enter your name" />
                                <p class="help-block text-danger"></p>
                            </div>
                            <div class="control-group">
                                <input type="email" class="form-control" id="email" placeholder="Your Email"
                                    required="required" data-validation-required-message="Please enter your email" />
                                <p class="help-block text-danger"></p>
                            </div>
                            <div class="control-group">
                                <input type="text" class="form-control" id="subject" placeholder="Subject"
                                    required="required" data-validation-required-message="Please enter a subject"
                                    minlength="5" maxlength="50" />
                                <p class="help-block text-danger"></p>
                            </div>
                            <div class="control-group">
                                <textarea class="form-control" rows="6" id="message" placeholder="Message"
                                    required="required"
                                    data-validation-required-message="Please enter your message"
                                    minlength="10"></textarea>
                                <p class="help-block text-danger"></p>
                            </div>
                            <div>
                                <button class="btn btn-primary py-2 px-4" type="submit" id="sendMessageButton">Send
                                    Message</button>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="col-lg-5">
                    <p style="margin-bottom: 0;">Have a question or need assistance? We're here to help! Reach out to us for any inquiries
                        regarding your orders, deliveries, or shopping experience with EzyShop. We're happy to assist
                        you with all your needs.</p>
                    <div class="d-flex align-items-center" style="gap: 1rem;">
                        <i class="fa fa-map-marker-alt d-inline-flex align-items-center justify-content-center bg-primary text-secondary rounded-circle"
                            style="width: 45px; height: 45px;"></i>
                        <div class="pl-3">
                            <h5 class="mt-lg-0">Address</h5>
                            <p style="margin-top: -3px; margin-bottom: 0;">Jaipur, Rajasthan</p>
                        </div>
                    </div>
                    <div class="d-flex align-items-center" style="gap: 1rem;">
                        <i class="fa fa-envelope d-inline-flex align-items-center justify-content-center bg-primary text-secondary rounded-circle"
                            style="width: 45px; height: 45px;"></i>
                        <div class="pl-3">
                            <h5>Email</h5>
                            <p style="margin-top: -3px; margin-bottom: 0;">ezyshop@gmail.com</p>
                        </div>
                    </div>
                    <div class="d-flex align-items-center" style="gap: 1rem;">
                        <i class="fa fa-phone-alt d-inline-flex align-items-center justify-content-center bg-primary text-secondary rounded-circle"
                            style="width: 45px; height: 45px;"></i>
                        <div class="pl-3">
                            <h5>Phone</h5>
                            <p style="margin-top: -3px; margin-bottom: 0;">+91 7739317870</p>
                        </div>
                    </div>
                    <div class="d-flex align-items-center" style="gap: 1rem;">
                        <i class="far fa-clock d-inline-flex align-items-center justify-content-center bg-primary text-secondary rounded-circle"
                            style="width: 45px; height: 45px;"></i>
                        <div class="pl-3">
                            <h5>Opening Hours</h5>
                            <strong>Our platform is available 24/7. For customer support</strong>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Contact End -->


    <!-- Footer Start -->
    <div class="container-fluid bg-secondary text-white mt-5 py-5 px-sm-3 px-md-5">
        <div class="row pt-5">
            <div class="col-lg-3 col-md-6 mb-5">
                <a href="" class="navbar-brand font-weight-bold text-primary m-0 mb-4 p-0" style="font-size: 40px; line-height: 40px">
                    <img style="width: 80px" src="./img/ezyshop.png" alt="logo" />
                    <span class="text-white">Ezyshop</span>
                </a>
                <p>
                    EzyShop is a user-friendly platform that connects you to local stores, offering a seamless shopping experience. Compare prices, access exclusive deals, and enjoy hassle-free deliveries for groceries, essentials, and organic products—all in one app.
                </p>
                <div class="d-flex justify-content-start mt-4">
                    <a class="btn btn-outline-primary rounded-circle text-center mr-2 px-0" style="width: 38px; height: 38px" href="https://github.com/mdazfar2/Ezyshop"><i class="fab fa-github"></i></a>
                    <a class="btn btn-outline-primary rounded-circle text-center mr-2 px-0" style="width: 38px; height: 38px" href="https://discord.com/invite/SEzpxqQG"><i class="fab fa-discord"></i></a>
                    <a class="btn btn-outline-primary rounded-circle text-center mr-2 px-0" style="width: 38px; height: 38px" href="https://www.linkedin.com/company/ezyshopz/"><i class="fab fa-linkedin-in"></i></a>
                    <a class="btn btn-outline-primary rounded-circle text-center mr-2 px-0" style="width: 38px; height: 38px" href="#"><i class="fab fa-instagram"></i></a>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 mb-5">
                <h3 class="text-primary mb-4">Get In Touch</h3>
                <div class="d-flex hov">
                    <a href="https://www.google.com/maps/place/Jaipur,+Rajasthan/@26.8851151,75.6257468,11z/data=!3m1!4b1!4m6!3m5!1s0x396c4adf4c57e281:0xce1c63a0cf22e09!8m2!3d26.9124336!4d75.7872709!16zL20vMDE2NzIyMjI?entry=ttu&g_ep=EgoyMDI0MTAwMi4xIKXMDSoASAFQAw%3D%3D">
                        <h4 class="fa fa-map-marker-alt text-primary icon"></h4>
                    </a>
                    <div class="pl-3 cont">
                        <a href="https://hi.wikipedia.org/wiki/%E0%A4%9C%E0%A4%AF%E0%A4%AA%E0%A5%81%E0%A4%B0">
                            <h5 class="text-white">Address</h5>
                            <p>Jaipur, Rajasthan</p>
                        </a>

                    </div>
                </div>
                <div class="d-flex hov">
                    <a href="mailto:ezyshop@gmail.com">
                        <h4 class="fa fa-envelope text-primary icon"></h4>
                        <div class="pl-3 cont">
                            <h5 class="text-white">Email</h5>
                            <p>ezyshop@gmail.com</p>
                    </a>

                    </div>
                </div>
                <div class="d-flex hov">
                    <a href="tel:7739317870">
                        <h4 class="fa fa-phone-alt text-primary icon"></h4>
                        <div class="pl-3 cont">
                            <h5 class="text-white">Phone</h5>
                            <p>+91 7739317870</p>
                    </a>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 mb-5">
                <h3 class="text-primary mb-4">Quick Links</h3>
                <div class="d-flex flex-column justify-content-start">
                    <a class="text-white mb-2" href="/index.html"><i class="fa fa-angle-right mr-2"></i>Home</a>
                    <a class="text-white mb-2" href="/about.html"><i class="fa fa-angle-right mr-2"></i>About Us</a>
                    <a class="text-white mb-2" href="/category.html"><i class="fa fa-angle-right mr-2"></i>Our Categories</a>
                    <a class="text-white mb-2" href="/team.html"><i class="fa fa-angle-right mr-2"></i>Our Teams</a>
                    <a class="text-white mb-2" href="/blog.html"><i class="fa fa-angle-right mr-2"></i>Our Blog</a>
                    <a class="text-white" href="/contact.html"><i class="fa fa-angle-right mr-2"></i>Contact Us</a>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 mb-5" id="news-form-section">
                <h3 class="text-primary mb-4">Newsletter</h3>
                <form id="newsForm" action="">
                    <div class="form-group">
                        <input type="text" class="form-control border-0 py-4" id="newsletterName" placeholder="Your Name" required="required" />
                    </div>
                    <div class="form-group">
                        <input type="email" class="form-control border-0 py-4" id="newsletterMail" placeholder="Your Email" required="required" />
                    </div>
                    <div>
                        <button class="btn btn-primary btn-block border-0 py-3" type="submit">
					Submit Now
				</button>
                    </div>
                </form>
                <div id="thankYouMessage" class="thank-you-message">
                    <div class="message-content">
                        <h2>Thanks for your Submission!</h2>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid pt-5" style="border-top: 1px solid rgba(23, 162, 184, 0.2)">
            <p class="m-0 text-center text-white">
                &copy; <a class="text-primary font-weight-bold" href="#">Ezyshop</a>. All Rights Reserved. Designed by
                <a class="text-primary font-weight-bold" href="https://www.azfaralam.xyz/">Azfar Alam</a>
            </p>
        </div>
    </div>
    <!-- Footer End -->

    <!-- Back to Top -->
    <a href="#" class="btn btn-primary p-3 back-to-top"><i class="fa fa-angle-double-up"></i></a>

    <!-- JavaScript Libraries -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
    <script src="lib/easing/easing.min.js"></script>
    <script src="lib/owlcarousel/owl.carousel.min.js"></script>
    <script src="lib/isotope/isotope.pkgd.min.js"></script>
    <script src="lib/lightbox/js/lightbox.min.js"></script>

    <!-- Auth JavaScript-->
    <script src="js/auth.js"></script>

    <!-- Contact Javascript File -->
    <script src="mail/jqBootstrapValidation.min.js"></script>
    <script src="mail/contact.js"></script>

    <!-- Template Javascript -->
    <script src="js/main.js"></script>

    <script src="js/newsLetter.js"></script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const authButton = document.getElementById("authButton");
            const currentUser = localStorage.getItem("currentUser");

            // Check if there's a logged-in user
            if (currentUser) {
                authButton.textContent = currentUser; // Change button text to username
                authButton.href = "#"; // Optionally, change the link to something else or remove it
                authButton.classList.add("btn-secondary"); // Optionally change button style
            }

            // Add event listener for logout
            authButton.addEventListener("click", function() {
                if (currentUser) {
                    // Show confirmation dialog before logging out
                    const confirmLogout = confirm("Do you want to logout?");

                    if (confirmLogout) {
                        // If confirmed, remove the current user from localStorage
                        localStorage.removeItem("currentUser");
                        // Reload the page to reset the button to "Login/SignUp"
                        location.reload();
                    }
                } else {
                    // Redirect to login page if no user is logged in
                    window.location.href = "RegisterPages/register.html"; // Update with your login page URL
                }
            });
        });
    </script>

    <!-- Add this new script tag -->
    <script>
    $(document).ready(function() {
        $('#contactForm').jqBootstrapValidation({
            preventSubmit: true,
            submitError: function($form, event, errors) {
                // Additional error messages or events
            },
            submitSuccess: function($form, event) {
                event.preventDefault();
                
                // Validate subject length
                var subject = $("input#subject").val();
                if(subject.length < 5 || subject.length > 50) {
                    $('#success').html("<div class='alert alert-danger'>");
                    $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                        .append("</button>");
                    $('#success > .alert-danger').append($("<strong>").text("Sorry, the subject must be between 5 and 50 characters long."));
                    $('#success > .alert-danger').append('</div>');
                    return;
                }
                
                // Validate message length
                var message = $("textarea#message").val();
                if(message.length < 10) {
                    $('#success').html("<div class='alert alert-danger'>");
                    $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                        .append("</button>");
                    $('#success > .alert-danger').append($("<strong>").text("Sorry, your message must be at least 10 characters long."));
                    $('#success > .alert-danger').append('</div>');
                    return;
                }
                
                // If both validations pass, you can submit the form or perform further actions
                // For now, we'll just show a success message
                $('#success').html("<div class='alert alert-success'>");
                $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                    .append("</button>");
                $('#success > .alert-success').append("<strong>Your message has been sent. </strong>");
                $('#success > .alert-success').append('</div>');
                $('#contactForm').trigger("reset");
            },
            filter: function() {
                return $(this).is(":visible");
            },
        });
    });
    </script>
</body>

</html>