<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>101 Distributors</title>
    <link rel="stylesheet" href="/css/style.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
    
</head>

<body>
    <header>
        <nav class="container d-flex justify-content-between">
            <div class="logo">
                <img src="https://www.101distributorsga.com/images/header/logo.png" alt="101 Distributors Logo">
            </div>
            <ul class="d-flex align-items-center">
                <li><a href="/home">Home</a></li>
                <li><a href="/gallery">Gallery</a></li>
                <li><a href="/about">About us</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <div class="main-content">
        <main>
            <h1>101 Distributors is here for any information.</h1>
            <div class="container mt-5">
              
                <div class="my-5">
                    <h3>Contact Information</h3>
                    <form id="contactForm" action="/submit-contact-info" method="post" onsubmit="showMessage(event)">
                        <div class="mb-3">
                            <label for="contactName" class="form-label">Name:</label>
                            <input type="text" class="form-control" id="contactName" name="contactName" required>
                        </div>
                        <div class="mb-3">
                            <label for="contactEmail" class="form-label">Email:</label>
                            <input type="email" class="form-control" id="contactEmail" name="contactEmail" required>
                        </div>
                        <div class="mb-3">
                            <label for="contactPhone" class="form-label">Phone:</label>
                            <input type="tel" class="form-control" id="contactPhone" name="contactPhone" required>
                        </div>
                        <div class="mb-3">
                            <label for="contactMessage" class="form-label">Message:</label>
                            <textarea class="form-control" id="contactMessage" name="contactMessage" rows="3" required></textarea>
                        </div>
                        <div class="text-center mt-4">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </form>
                    <div id="messageBox" style="display:none; margin-top: 20px; color: #ff4500; font-weight: bold;"></div>
                </div>
            </div>
        </main>
    </div>
    <div class="group-clumsy-credits" style="text-align: center; padding: 20px; background-color: #f0e68c; font-style: italic;">
        <p>
            ðŸš€ Crafted with a dash of clumsiness and a sprinkle of genius by Group Clumsy - 
            <a href="https://github.com/amannawaria12" target="_blank">Aman N.</a>, 
            <a href="https://github.com/VikAsNeHrA1" target="_blank">Vikas</a>, and 
            <a href="https://github.com/mithrandiryeet" target="_blank">William</a>.
        </p>
        <p>Peek into our magical concoction: 
            <a href="https://github.com/VikAsNeHrA1/Order-Management-app" target="_blank" style="color: #ff4500;">The Project Spellbook ðŸ“–</a>
        </p>
    </div>
    <script>
        function showMessage(event) {
            event.preventDefault(); // Prevents the default form submission
            document.getElementById('messageBox').style.display = 'block'; // Makes the message box visible
            document.getElementById('messageBox').innerHTML = 'ðŸŒŸ Your query has been magically registered! We\'ll conjure up a response and get back to you soon! ðŸŒŸ';
        }
    </script>

    <footer>
        <img src="https://github.com/VikAsNeHrA1/Order-Management-app/blob/main/views/footer.png?raw=true" alt="Footer Image" class="footer-image" id="footer-image">
    </footer>
    
    
    

</body>
</html>

