<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact | Bismark-IQ-Tech</title>
    <link rel="stylesheet" href="contactStyle.css">
    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/particles.js"></script>
    <link rel="shortcut icon" href="media/main2.jpg" type="image/x-icon">
</head>
<body>
    <!-- Particles Background -->
    <div id="particles-js"></div>

    <!-- Header -->
    <header>
        <nav>
            <div class="logo">Bismark IQ Tech</div>
            <!-- <ul class="nav-links">
                <li><a href="index.html">About</a></li>
                <li><a href="skills.html">Skills</a></li>
                <li><a href="projects.html">Projects</a></li>
                <li><a href="#contact" class="active">Contact</a></li>
            </ul> -->
            <button id="themeToggle">🌙</button>
        </nav>
    </header>

    <!-- Contact Section -->
    <section class="contact">
        <h1>Contact Me</h1>
        <form id="contactForm">
            <label for="name">Name:</label>
            <input type="text" id="name" placeholder="Your Name" required>

            <label for="email">Email:</label>
            <input type="email" id="email" placeholder="Your Email" required>

            <label for="voice">Message (Voice Input Available):</label>
            <textarea id="message" rows="5" maxlength="500" placeholder="Your Message"></textarea>
            <small id="charCount">500 characters left</small>
            <button type="button" id="voiceInput">🎙 Start Voice Input</button>

            <label for="file">Attach File:</label>
            <input type="file" id="file" accept=".pdf,.jpg,.png">

            <button type="submit" id="submitButton">Send Message</button>
        </form>

        <!-- QR Code -->
        <!-- <div id="qrCodeSection">
            <h3>Scan My Contact Info:</h3>
            <canvas id="qrCodeCanvas"></canvas>
        </div> -->

        <!-- Loading Spinner -->
        <div id="spinner" class="hidden"></div>

        <!-- Confirmation Modal -->
        <div id="modal" class="hidden">
            <div class="modal-content">
                <h2>Confirm Submission</h2>
                <p>Are you sure you want to submit?</p>
                <button id="confirmYes">Yes</button>
                <button id="confirmNo">No</button>
            </div>
        </div>
    </section>

    <!-- Chatbot -->
    <div id="chatbot">
        <button id="chatToggle">💬 Chat</button>
        <div id="chatContent" class="hidden">
            <p>Hi! How can I assist you today?</p>
            <input type="text" id="chatInput" placeholder="Type your question...">
            <button id="chatSend">Send</button>
        </div>
    </div>





    <footer class="footer">
        <div class="footer-container">
            <div class="footer-about">
                <h3>Bismarck IQ Tech</h3>
                <p>Your go-to problem solver, developer, and tech content creator.</p>
            </div>
            <div class="footer-links">
                <h4>Quick Links</h4>
                <ul>
                    <li><a href="project.html">See My Work</a></li>
                    <li><a href="contact.html">Contact Me</a></li>
                    <li><a href="Services.html">Services</a></li>
                </ul>
            </div>
            <div class="footer-social">
                <h4>Connect with Me</h4>
                <a href="https://www.facebook.com/BismarkIQTech?mibextid=ZbWKwL" target="_blank">Facebook</a> |
                <a href="https://www.twitter.com" target="_blank">INSTAGRAM</a> |
                <a href="https://www.youtube.com/@bismarkIQTech" target="_blank">Youtube</a>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2024 Bismarck IQ Tech. All Rights Reserved.</p>
        </div>
    </footer>





    <script src="contactScript.js"></script>
</body>
</html>