class FooterTemplate extends HTMLElement {
    constructor() {
        super();
        this.innerHTML = `
        <footer id="footer" class="footer-area pt-120">
        <div class="container">
            <div class="subscribe-area wow fadeIn" data-wow-duration="1s" data-wow-delay="0.5s">
                <div class="row">
                    <div class="col-lg-4">
                        <div class="subscribe-content mt-45">
                            <h2 class="subscribe-title">
                                Contact us:
                            </h2>
                        </div>
                    </div>
                    <div class="col-lg-8">
                        <div class="subscribe-form mt-50" id="subscribe-form">
                            <form onsubmit="return false;">
                                <input required id="email" type="email" placeholder="Enter email" />
                                <button type="button" class="main-btn" onclick="submitform()">Send message</button>
                                <label for="messageTxt">Message:</label>
                                <textarea class="form-control" id="messageTxt" name="messageTxt" rows="7"
                                    required></textarea>
                            </form>
                        </div>
                    </div>
                </div>
                <!-- row -->
            </div>
            <!-- subscribe area -->
            <div class="footer-widget pb-100">
                <div class="row">
                    <div class="col-lg-4 col-md-6 col-sm-8">
                        <div class="footer-about mt-50 wow fadeIn" data-wow-duration="1s" data-wow-delay="0.2s">
                            <a class="logo" href="javascript:void(0)">
                                <img src="proxy.php?url=https%3A%2F%2Fqr-code-robot.com%2Fassets%2Flogo_bg.png" alt="logo" />
                            </a>
                            <p class="text">
                                Free uptime monitoring service assuring you 100% uptime.
                            </p>
                            <p class="text">
                                Free UptimeRobot alternative.
                            </p>
                            <p class="text">
                                Free OnlineOrNot alternative.
                            </p>
                            <p class="text">
                                Free Better Uptime alternative.
                            </p>
                            <ul class="social">
                                <li>
                                    <a href="proxy.php?url=https%3A%2F%2Fwww.facebook.com%2FRoboMiri-Uptime-Monitor-102938705638955%2F"
                                        target="_blank">
                                        <i class="lni lni-facebook-filled"> </i>
                                    </a>
                                </li>
                                <li>
                                    <a href="proxy.php?url=https%3A%2F%2Ftwitter.com%2FBeniaminPantiru" target="_blank">
                                        <i class="lni lni-twitter-filled"> </i>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <!-- footer about -->
                    </div>
                    <div class="col-lg-5 col-md-7 col-sm-12">
                        <div class="footer-link d-flex mt-50 justify-content-sm-between">
                            <div class="link-wrapper wow fadeIn" data-wow-duration="1s" data-wow-delay="0.4s">
                                <div class="footer-title">
                                    <h4 class="title">Quick Link</h4>
                                </div>
                                <ul class="link">
                                    <li><a href="proxy.php?url=https%3A%2F%2Frobomiri.com%2Fwebsite.html" target="_blank">Free Website
                                            Monitoring</a></li>
                                    <li><a href="proxy.php?url=https%3A%2F%2Frobomiri.com%2Fcron-job.html" target="_blank">Free Heartbeat
                                            Monitoring</a></li>
                                    <li><a href="proxy.php?url=https%3A%2F%2Frobomiri.com%2Fkeyword.html" target="_blank">Free Keyword
                                            Monitoring</a></li>
                                    <li><a href="proxy.php?url=https%3A%2F%2Frobomiri.com%2Fport.html" target="_blank">Free Port
                                            Monitoring</a></li>
                                    <li><a href="proxy.php?url=https%3A%2F%2Frobomiri.com%2Fterms.html" target="_blank">Terms of Service</a>
                                    </li>
                                </ul>
                            </div>
                            <!-- footer wrapper -->
                            <div class="link-wrapper wow fadeIn" data-wow-duration="1s" data-wow-delay="0.6s">
                                <div class="footer-title">
                                    <h4 class="title">Resources</h4>
                                </div>
                                <ul class="link">
                                    <li>
                                        <a href="proxy.php?url=https%3A%2F%2Fqr-code-robot.com%2Furl.html">URL QR Code
                                            Generator</a>
                                    </li>
                                    <li>
                                        <a href="proxy.php?url=https%3A%2F%2Fqr-code-robot.com%2Fvcard.html">VCARD QR Code
                                            Generator</a>
                                    </li>
                                    <li>
                                        <a href="proxy.php?url=https%3A%2F%2Fqr-code-robot.com%2Ftext.html">TEXT QR Code
                                            Generator</a>
                                    </li>
                                    <li>
                                        <a href="proxy.php?url=https%3A%2F%2Fqr-code-robot.com%2Femail.html">EMAIL QR Code
                                            Generator</a>
                                    </li>
                                    <li>
                                        <a href="proxy.php?url=https%3A%2F%2Fqr-code-robot.com%2Fsms.html">SMS QR Code
                                            Generator</a>
                                    </li>
                                    <li>
                                        <a href="proxy.php?url=https%3A%2F%2Fqr-code-robot.com%2Fwifi.html">WiFi QR Code
                                            Generator</a>
                                    </li>
                                </ul>
                            </div>
                            <!-- footer wrapper -->
                        </div>
                        <!-- footer link -->
                    </div>
                    <div class="col-lg-3 col-md-5 col-sm-12">
                        <div class="footer-contact mt-50 wow fadeIn" data-wow-duration="1s" data-wow-delay="0.8s">
                            <div class="footer-title">
                                <h4 class="title">Contact Us</h4>
                            </div>
                            <ul class="contact">
                                <li>contact@robomiri.com</li>
                                <li>https://robomiri.com</li>
                                <li>
                                    Rotterdam <br />
                                    Netherlands
                                </li>
                            </ul>
                        </div>
                        <!-- footer contact -->
                    </div>
                </div>
                <!-- row -->
            </div>
            <!-- footer widget -->
            <div class="footer-copyright">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="copyright d-sm-flex justify-content-between">
                            <div class="copyright-content">
                                <p class="text">
                                    Made with love in Rotterdam, NL
                                </p>
                            </div>
                            <!-- copyright content -->
                        </div>
                        <!-- copyright -->
                    </div>
                </div>
                <!-- row -->
            </div>
            <!-- footer copyright -->
        </div>
        <!-- container -->
        <div id="particles-2"></div>
    </footer>
        `;
    }
}

if ('customElements' in window) {
    customElements.define('footer-template', FooterTemplate);
}