TinyLifeWeb/web/_includes/social.html

<div class="section">
    <h1 id="social">🔗 Social</h1>
    <p>
        If you want to stay up to date with Tiny Life's development, you should follow the game on Twitter or subscribe to the mailing list below. You can also <a href="https://link.tinylifegame.com/discordweb">join the Discord</a> to ask questions or share your gameplay!
    </p>

    <div class="row justify-content-center socials">
        <div class="col-auto" style="padding: 10px;">
            <a class="twitter-timeline" href="https://twitter.com/TinyLifeGame" width="350" height="600"></a>
            <script defer src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
        </div>
        <div class="col-auto" style="padding: 10px;">
            <iframe id="discord-widget" title="Ellpeck Games Discord server" width="350" height="600" allowtransparency="true" frameborder="0"></iframe>
        </div>

        <script>
            let theme = darkTheme ? "dark" :"light";
            $("#discord-widget").attr("src", `https://discordapp.com/widget?id=181435613147430913&theme=${theme}`);
            $(".twitter-timeline").attr("data-theme", theme);
        </script>
    </div>

    <div id="subscribe" class="mailing-list bg-light">
        <h3>📫 Subscribe</h3>
        <p>You can also subscribe to the mailing list, which means you will be notified about future news, sneak peeks and devlog posts via email. We promise not to send too many emails, but you can always unsubscribe easily, too.</p>

        <form method="post" action="https://lists.ellpeck.de/subscription/form" class="listmonk-form text-center">
            <div>
                <input type="hidden" name="nonce">
                <p><input type="email" name="email" required placeholder="E-mail"></p>
                <p><input type="text" name="name" placeholder="Name (optional)"></p>

                <p>
                    <input id="16f4b" type="checkbox" name="l" checked value="16f4bf5a-7133-4255-958e-1d325fea6ba8">
                    <label for="16f4b">🏡 Tiny Life News</label>
                </p>

                <p><input type="submit" value="Subscribe"></p>
            </div>
        </form>

        <script>
            if (darkTheme) {
                let navbar = $("#subscribe");
                navbar.removeClass("bg-light");
                navbar.addClass("bg-dark");
            }
        </script>
    </div>
</div>