index.html

<!DOCTYPE html>
<html lang="en" data-theme="light">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="google-adsense-account" content="ca-pub-9045308343519031">
    <title>NextCodeLab | Windows, Android & iOS Apps and Developer Tools</title>
    <meta name="description"
        content="Explore useful applications and utility tools for Windows, Android, iOS, and the web, created by NextCodeLab.">
    <link rel="icon" type="image/svg+xml" href="/assets/icon.svg">
    <link rel="apple-touch-icon" href="/assets/icon.svg">


    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/webapps.css">
    <!-- Cloudflare Web Analytics -->
    <script type='module' src='https://static.cloudflareinsights.com/beacon.min.js'
        data-cf-beacon='{"token": "6bbc1a3ecb334735a4137f1bf50463a0"}'>
        </script>
    <!-- End Cloudflare Web Analytics -->
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9045308343519031"
        crossorigin="anonymous"></script>
</head>

<body>


    <main>
        <header class="hero container">
            <h5 class="hero-title">Useful Apps for Windows, Android, iOS & the Web</h1>
                <p>
                    Apps made to be useful — a portfolio of high-quality applications
                    and utility tools designed for Windows, Android, iOS, and the web.
                </p>
        </header>
        <hr class="custom-divider">
        <section id="web-apps" class="container web-apps-section">

            <div class="section-header" style="margin-bottom: 15px;">
                <div>
                    <h2>Web Apps</h2>
                    <p class="section-subtitle">
                        Simple tools that work directly in your browser.
                    </p>
                </div>
            </div>

            <!-- JavaScript injects Web Apps here -->
            <div class="web-app-grid" id="web-app-grid">
            </div>

        </section>
        <hr class="custom-divider">
        <section id="apps" class="container">
            <div class="section-header">
                <h2 style="margin-bottom: 8px;">All Applications</h2>
                <div class="category-filters">
                    <button class="filter-chip active" data-filter="all">All</button>
                    <button class="filter-chip" data-filter="productivity">Productivity</button>
                    <button class="filter-chip" data-filter="bible">Bible</button>
                    <button class="filter-chip" data-filter="utilities">Utilities</button>
                </div>
            </div>

            <!-- JavaScript will inject all app cards here automatically -->
            <div class="app-grid" id="app-grid"></div>
        </section>
    </main>

    <footer class="footer">
        <div class="container footer-content">

            <!-- Brand -->
            <div class="footer-column footer-brand">

                <a href="/" class="footer-logo">

                    <img src="/assets/icon.svg" alt="NextCodeLab" loading="lazy">

                    <span>
                        <strong data-site-name></strong>
                        <small data-company-tagline></small>
                    </span>

                </a>

                <p data-company-description></p>

            </div>


            <!-- Contact -->
            <div class="footer-column">

                <h3>Contact</h3>

                <ul class="footer-links">

                    <li>
                        <a data-contact-email href="#">
                            <i class="fa fa-envelope"></i>
                            Contact Us
                        </a>
                    </li>

                    <li>
                        <a data-site-website href="#">
                            <i class="fa fa-globe"></i>
                            Website
                        </a>
                    </li>

                </ul>

            </div>


            <!-- Legal -->
            <div class="footer-column">

                <h3>Legal</h3>

                <ul class="footer-links">

                    <li>
                        <a data-privacy-link href="/privacy/">
                            <i class="fa fa-shield"></i>
                            Privacy Policy
                        </a>
                    </li>

                    <li>
                        <a data-terms-link href="/terms/">
                            <i class="fa fa-file-text"></i>
                            Terms &amp; Conditions
                        </a>
                    </li>

                </ul>

            </div>


            <!-- About -->
            <div class="footer-column">

                <h3 data-footer-about-title>
                    About NextCodeLab
                </h3>

                <p data-footer-about></p>

            </div>

        </div>


        <!-- Copyright -->
        <div class="container footer-bottom">

            <p>
                &copy;
                <a href="/" class="footer-company-link">
                    <span data-copyright></span>
                    <strong data-site-name></strong>
                </a>.
                All rights reserved.
            </p>

        </div>

    </footer>


    <!-- Scroll to top -->
    <button id="scroll-top" class="scroll-top" aria-label="Scroll to top">

        <i class="fa fa-angle-up"></i>

    </button>

    <!-- Shared JavaScript -->
    <script src="/site-config.js"></script>
    <script src="/js/data.js"></script>
    <script src="/js/script.js"></script>
    <script src="/js/legal.js"></script>
    <script src="/js/header.js"></script>
    <script src="/js/webapps.js"></script>

</body>

</html>