EVOLUTION-NINJA

Edit File: contactUs.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Amcad bharath</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/amcadStyles.css">
    <style>
        .contact-left {
            padding: 14px;
            display: flex;
            flex-direction: column;
            border: 1px solid lightgrey;
            box-shadow: 2px 2px 10px #ccc;
            padding: 20px;
            border-radius: 30px;
            padding: 40px;
            background-color: white;

}

.cont_head {
            font-weight: 600;
            font-size: 21px;
            color: #ff5533;
        }

.con_info {
            text-decoration: none;
            color: #495057;
            font-size: 19px;
        }

.subFormBtn {

padding: 7px 36px;
            background-color: #ff5534;
            color: #ffffff;
            font-weight: 600;
            font-size: 21px;
            margin-top: 12px;

}

.form-control {
            border-color: #e1a902
        }

.inp-fil {
            height: 56px;
        }

.add-icons {
            width: 37px
        }

</style>
</head>

<nav class="navbar navbar-expand-lg  ">
        <div class="container-fluid">

<div class="collapse navbar-collapse mainNavBar" id="navbarNavDropdown">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link  NavLinks" aria-current="page" href="index.html">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link NavLinks" href="aboutUs.html">About Us</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link NavLinks" href="programsPage.html">PROGRAMS</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link  NavLinks" aria-current="page" href="eventsPage.html">EVENTS</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link NavLinks" href="gallery.html">GALLERY</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link NavLinks" href="contactUs.html">CONTACT US</a>
                    </li>
                    
                </ul>
            </div>
        </div>
    </nav>

<section class="">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12 col-md-6 col-lg-6 d-flex flex-column justify-content-center align-items-center">
                    <p class="aboutpara">Tell me and I forget, Teach me and I <br> may remember, involve me and I learn.
                    </p>
                    <button class="aboutbtn btn">CONTACT US</button>
                </div>
                <div
                    class="col-sm-12 col-md-6 col-lg-6 d-flex flex-column justify-content-center align-items-center mt-4">
                    <img src="./images/banner-4.png" alt="sir image" class="aboutbannere">

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

<h3 style="color:#dc3545">Get In Touch</h3>
                    <p style="color:#53585c;margin-bottom: 0;">Our Team is waiting for your Precious Call, Get your
                        Questions Answered and Join Us to Explore The World of Innovation, Where we encourage New ideas
                        to solve Modern Problems</p>
                    <hr>

</div>
                        <div class="email-us">
                            <div><img src="./images/email (1).png" alt="" class="add-icons">
                                <p class="cont_head">Email Us</p>
                            </div>
                            <div style="line-height: 1;
            margin-top: 7px ;color: #073C52;;
        ">

<a href="mailto:amcadpatha.1996@gmail.com" class="con_info">amcadpatha.1996@gmail.com</a>
                            </div>
                        </div>
                    </div>

<!-- <div class="address">

<div class="location-address mt-2">
                            <div><img src="./images/address.png" alt="" class="add-icons">
                                <p class="cont_head">ADDRESS</p>
                            </div>
                            <div>

<p class="con_info">C/o Rajakamal Estate,
                                    Bannur Main Road, <br> Vijamangala Gate, Halagayyanahundi(Village), Near R R Wedding
                                    Bells, <br>
                                    Mysuru, Karnataka - 570028</p>
                            </div>
                        </div>
                    </div> -->

<div class="location-address mt-2">
                            <div><img src="./images/address.png" alt="" class="add-icons">
                                <p class="cont_head">Head Office ADDRESS</p>
                            </div>
                            <div>

<p class="con_info">No.134, 2nd Main, Jayanagar, Mysuru - 570014</p>
                            </div>
                        </div>
                    </div>

</div>

<div class="contact-right col-sm-6">

<h2 style="margin-bottom:30px;color:#dc3545 ">Reach us for more details.
                    </h2>
                    <hr>

<textarea class="form-control description2" id="description" placeholder="Your Message"
                                rows="5" name="message" required=""  oninput="this.value=this.value.replace(/<[^>]*>?/gm,'');"></textarea>
                        </div>
                        <div class="mb-2">
        <canvas id="captcha" width="200" height="50" style="border:1px solid #ccc;"></canvas>
        <button type="button" id="refresh-captcha" class="btn btn-sm btn-secondary">Refresh</button>
    </div>

<input type="text" id="captcha-input" class="form-control" placeholder="Enter CAPTCHA" required />
    <div id="captcha-error" style="color:red; display:none;">CAPTCHA does not match</div>

<div><button class="btn subFormBtn" type="submit">Submit</button></div>

</form>

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

<footer class="mt-5 footer-block mb-4">
        <div class="vyfooter row">
            <div class="col-lg-4 col-sm-12 d-flex justify-content-center flex-column align-items-center p-3">
                <img src="./images//amcadheadlogo.png" alt="" class="logoimg" style="background-color: white;">

</div>
            <div class="col-lg-8 col-sm-12 footer-details ">

<div class="col-sm-4 cont-details">
                        <h4>Contact </h4>
                        <a href="tel:+919448063607" class="contact-num">+919448063607</a>
                        <a href="tel:+918123423007" class="contact-num">+918123423007</a>

<h4 class="mt-1">Email </h4>
                        <a href="mailto:amcadpatha.1996@gmail.com" class="contact-num">amcadpatha.1996@gmail.com</a>
                        <h4>Head Office</h4>
                        <address>No.134, 2nd Main, Jayanagar,
                            Mysuru - 570014</address>

</div>

<div class="col-sm-4 cont-details">
                        <h4>Quick Links</h4>
                        <ul class="page-links">
                            <li><a href="index.html"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="20"
                                        fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
                                        <path fill-rule="evenodd"
                                            d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8">
                                        </path>
                                    </svg>Home</a></li>
                            <li><a href="aboutUs.html"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="20"
                                        fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
                                        <path fill-rule="evenodd"
                                            d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8">
                                        </path>
                                    </svg>About Us</a></li>
                            <li><a href="programsPage.html"><svg xmlns="http://www.w3.org/2000/svg" width="24"
                                        height="20" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
                                        <path fill-rule="evenodd"
                                            d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8">
                                        </path>
                                    </svg>Programs</a></li>
                            <li><a href="eventsPage.html"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="20"
                                        fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
                                        <path fill-rule="evenodd"
                                            d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8">
                                        </path>
                                    </svg>Events</a></li>
                            <li><a href="gallery.html"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="20"
                                        fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
                                        <path fill-rule="evenodd"
                                            d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8">
                                        </path>
                                    </svg>Gallery</a></li>
                            <li><a href="contactUs.html"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="20"
                                        fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
                                        <path fill-rule="evenodd"
                                            d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8">
                                        </path>
                                    </svg>Contact Us</a></li>
                        </ul>
                    </div>

<div class="col-sm-4 cont-details">
                        <h4>Follow Us on</h4>

<a href="https://www.facebook.com/share/16R2XkUw3i/" class="soc-block"><img
                                src="./images/facebook.png" alt="" class="socialicom">Join our
                            Movements</a> <br>
                        <a href="https://www.instagram.com/amcadpatha?igsh=MTU3bmR6OGM4NG13cw==" class="soc-block"><img src="./images/social.png" alt=""
                                class="socialicom">Instagram</a> <br>
                        <a href="http://www.youtube.com/@amcad-chethanram" class="soc-block"><img
                                src="./images/youtube.png" alt="" class="socialicom">Mastery
                            Sessions</a> <br>
                             <a href="(16) AMCAD Chaithanya Patha | LinkedIn" class="soc-block"><img
                                src="./images/linkedin (2).png" alt="linkedin" class="socialicom">Linkedin</a> <br>
                        
                    </div>
                    
                </div>
            </div>
            <div class="col-sm-12 text-center footer-rights p-2">© Copyright 2025 AMCAD ®, Mysuru. All rights reserved.
                |
                Developed By: <a href="https://jayblues.com/" class="jayblues">JayBlues Technologies</a></div>

</div>
    </footer>

</body>
<script src="./js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
    generateCaptcha();

document.getElementById("refresh-captcha").addEventListener("click", function () {
        generateCaptcha();
        document.getElementById("captcha-input").value = "";
        document.getElementById("captcha-error").style.display = "none";
    });

document.getElementById("captcha-form").addEventListener("submit", function (e) {
        e.preventDefault(); // prevent form submission for demo
        const userInput = document.getElementById("captcha-input").value.trim();
        const storedCaptcha = sessionStorage.getItem("captchaCode");

if (userInput === storedCaptcha) {
            alert("CAPTCHA matched. Form submitted successfully!");
            // You can submit form using AJAX or redirect here
            generateCaptcha();
            this.reset();
            document.getElementById("captcha-error").style.display = "none";
        } else {
            document.getElementById("captcha-error").style.display = "block";
            generateCaptcha();
            document.getElementById("captcha-input").value = "";
        }
    });

function generateCaptcha() {
        const canvas = document.getElementById("captcha");
        const ctx = canvas.getContext("2d");
        ctx.clearRect(0, 0, canvas.width, canvas.height);

const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
        let captcha = "";

for (let i = 0; i < 6; i++) {
            const char = chars.charAt(Math.floor(Math.random() * chars.length));
            captcha += char;

ctx.font = `${20 + Math.random() * 10}px Arial`;
            ctx.fillStyle = `rgb(${rand(50, 150)}, ${rand(50, 150)}, ${rand(50, 150)})`;

const x = 20 + i * 30;
            const y = 35 + rand(-5, 5);
            ctx.fillText(char, x, y);
        }

sessionStorage.setItem("captchaCode", captcha);
    }

function rand(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
});
</script>

</html>