index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>TheNolle's Electron Translator | Main Page</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="assets/css/nav.css">
    <link rel="stylesheet" href="assets/css/footer.css">
    <link rel="stylesheet" href="assets/css/popup.css">
    <link rel="stylesheet" href="assets/css/style.css">

    <script src="https://www.thenolle.com/global_assets/js/Font%20Awesome%20Pro%205.14.0.js"></script>
</head>

<body>
    <header class="header">
        <section class="upper" style="-webkit-app-region: drag;">
            <div class="wrap">
                <a class="logo" href="https://www.thenolle.com/Realms/" target="_external">
                    <img src="assets/img/logo.png" style="-webkit-app-region: no-drag;">
                </a>
                <div class="logo-title">
                    <h1 class="translate" data-lang-node="main.title" style="color: white;">
                        TheNolle's Electron Translator
                    </h1>
                </div>
                <div class="logged-out">
                    <a style="-webkit-app-region: no-drag;" id="minimizebtn" class="minimize-button">
                        <i class="far fa-window-minimize"></i>
                    </a>
                    <a style="-webkit-app-region: no-drag;" id="maximizebtn" class="maximize-button">
                        <i class="far fa-window-restore hiddenbtn" id="restoreicon"></i>
                        <i class="far fa-window-maximize" id="maximizeicon"></i>
                    </a>
                    <a style="-webkit-app-region: no-drag;" id="closebtn" class="close-button">
                        <i class="far fa-times"></i>
                    </a>
                </div>
            </div>
        </section>
    </header>

    <div class="under-image"></div>

    <div class="content">

        <div class="card-4 margin" style="background-color: white;">
            <img src="assets/img/placeholder.png" alt="Placeholder" style="min-width:100%; max-height: 175px">
            <div class="container">
                <h3>
                    <b class="translate" data-lang-node="example.title.one">
                        TITLE ONE
                    </b>
                </h3>
                <h5>
                    <tag class="translate" data-lang-node="example.description.two">
                        Title description one,
                    </tag>
                    <span class="translate opacity" data-lang-node="example.date">
                        March 02, 2021
                    </span>
                </h5>
            </div>

            <div class="container">
                <p class="translate" data-lang-node="example.text.one">
                    You can, as you can see, translate this text into multiple languages without having to have an
                    enormous index.html ! You can use custom tags like &lt;tag&gt; or &lt;translate&gt; to translate a
                    certain place in a text, but you'll have to use it multiple times if you have a really big text like
                    this! So like this you can change only certain parts of the text, you'll see an example in the last
                    modal.
                </p>
            </div>
        </div>

        <div class="card-4 margin" style="background-color: white;">
            <img src="assets/img/placeholder.png" alt="Placeholder" style="min-width:100%; max-height: 175px">
            <div class="container">
                <h3>
                    <b class="translate" data-lang-node="example.title.two">
                        TITLE TWO
                    </b>
                </h3>
                <h5>
                    <tag class="translate" data-lang-node="example.description.two">
                        Title description two,
                    </tag>
                    <span class="translate opacity" data-lang-node="example.date">
                        March 02, 2021
                    </span>
                </h5>
            </div>

            <div class="container">
                <p>
                    <tag class="translate" data-lang-node="example.text.two.tag">
                        As said, you can use &lt;tag&gt; or &lt;translate&gt; to change only a specific area, for
                        example this, from the start of the text to 'This text...' is in a &lt;tag&gt; and as you can
                        see
                    </tag>
                    <b>This text won't change no matter the language</b>
                    <translate class="translate" data-lang-node="example.text.two.translate">
                        and all the text from 'the language' to the end is in a &lt;translate&gt;.
                    </translate>
                </p>
            </div>
        </div>

    </div>

    <div class="under-image"></div>

    <footer class="footer" id="footer">
        <div class="footer-divider light-pink"></div>
        <div class="footer-container">
            <div class="wrap">
                <a href="https://www.thenolle.com/" style="color: white;" target="_external">
                    <i class="far fa-copyright"></i> 2019-
                    <script>
                        document.write(new Date().getFullYear())
                    </script>
                    TheNolle's Studios, <tag class="translate" data-lang-node="footer.logo.inc">Inc.</tag>
                </a>
                <div class="footer-links">
                    <a href="#footer">
                        <tag class="translate" data-lang-node="footer.link1">Link 1</tag>
                    </a>
                    <a href="#footer">
                        <tag class="translate" data-lang-node="footer.link2">Link 2</tag>
                    </a>
                    <a onclick="langsPopup()" style="cursor: pointer;">
                        <tag class="translate" data-lang-node="footer.popup.langs">Change Language</tag>
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <div class="popup" id="langsPopup">
        <div class="popup-overlay"></div>
        <div class="popup-content">
            <div class="popup-close-btn" onclick="langsPopup()">
                <i class="fas fa-times"></i>
            </div>
            <h1 class="translate" data-lang-node="popup.langs.title">
                Change Language
            </h1>
            <select name="langs" id="lang-select" onchange="updateSelectedLanguage()">

            </select>
            <br>
            <h4 class="translate" data-lang-node="popup.langs.information.title">
                Information:
            </h4>
            <p class="translate" data-lang-node="popup.langs.information.text">
                You also have an example of Popup with this file that you can find direcly in the index.html just under
                the footer.
            </p>
        </div>
    </div>

    <script src="assets/js/utils-buttons.js"></script>
    <script src="translator/js/translator.js"></script>
    <script>
        function langsPopup() {
            document.getElementById("langsPopup").classList.toggle("popup-active");
        }
    </script>

</body>

</html>