SkirdaElectronLauncher/app/landing.ejs

<div id="landingContainer" style="display: none;">
    <div id="upper">
        <div id="left">
            <div id="image_seal_container">
                <img id="image_seal" src="assets/images/SealCircle.png"/>
                <div id="updateAvailableTooltip"><%- lang('landing.updateAvailableTooltip') %></div>
            </div>
        </div>
        <div id="content">
        </div>
        <div id="right">
            <div id="rightContainer">
                <div id="user_content">
                    <span id="user_text"><%- lang('landing.usernamePlaceholder') %></span>
                    <div id="avatarContainer">
                        <button id="avatarOverlay"><%- lang('landing.usernameEditButton') %></button>
                    </div>
                </div>
                <div id="mediaContent">
                    <div id="internalMedia">
                        <div class="mediaContainer" id="settingsMediaContainer">
                            <button class="mediaButton" id="settingsMediaButton">
                                <svg id="settingsSVG" class="mediaSVG" viewBox="0 0 141.36 137.43">
                                    <path d="M70.70475616319865,83.36934004916053 a15.320781354859122,15.320781354859122 0 1 1 14.454501310561755,-15.296030496450625 A14.850515045097694,14.850515045097694 0 0 1 70.70475616319865,83.36934004916053 M123.25082856443602,55.425620905968366 h-12.375429204248078 A45.54157947163293,45.54157947163293 0 0 0 107.21227231573047,46.243052436416285 l8.613298726156664,-9.108315894326587 a9.727087354538993,9.727087354538993 0 0 0 0,-13.167456673319956 l-3.465120177189462,-3.6631270444574313 a8.489544434114185,8.489544434114185 0 0 0 -12.375429204248078,0 l-8.613298726156664,9.108315894326587 A40.442902639482725,40.442902639482725 0 0 0 81.99114759747292,25.427580514871032 V12.532383284044531 a9.108315894326587,9.108315894326587 0 0 0 -8.811305593424633,-9.306322761594556 h-4.950171681699231 a9.108315894326587,9.108315894326587 0 0 0 -8.811305593424633,9.306322761594556 v12.895197230826497 a40.17064319698927,40.17064319698927 0 0 0 -9.331073620003052,4.0591407789933704 l-8.613298726156664,-9.108315894326587 a8.489544434114185,8.489544434114185 0 0 0 -12.375429204248078,0 L25.58394128451018,23.967279868769744 a9.727087354538993,9.727087354538993 0 0 0 0,13.167456673319956 L34.19724001066683,46.243052436416285 a45.07131316187151,45.07131316187151 0 0 0 -3.6631270444574313,9.083565035918088 h-12.375429204248078 a9.083565035918088,9.083565035918088 0 0 0 -8.811305593424633,9.306322761594556 v5.197680265784193 a9.108315894326587,9.108315894326587 0 0 0 8.811305593424633,9.306322761594556 h11.979415469712139 a45.69008462208391,45.69008462208391 0 0 0 4.0591407789933704,10.642869115653347 l-8.613298726156664,9.108315894326587 a9.727087354538993,9.727087354538993 0 0 0 0,13.167456673319956 l3.465120177189462,3.6631270444574313 a8.489544434114185,8.489544434114185 0 0 0 12.375429204248078,0 l8.613298726156664,-9.108315894326587 a40.49240435629971,40.49240435629971 0 0 0 9.331073620003052,4.0591407789933704 v12.895197230826497 a9.083565035918088,9.083565035918088 0 0 0 8.811305593424633,9.306322761594556 h4.950171681699231 A9.083565035918088,9.083565035918088 0 0 0 81.99114759747292,123.68848839660077 V110.79329116577425 a40.78941465720167,40.78941465720167 0 0 0 9.331073620003052,-4.0591407789933704 l8.613298726156664,9.108315894326587 a8.489544434114185,8.489544434114185 0 0 0 12.375429204248078,0 l3.465120177189462,-3.6631270444574313 a9.727087354538993,9.727087354538993 0 0 0 0,-13.167456673319956 l-8.613298726156664,-9.108315894326587 a45.665333763675406,45.665333763675406 0 0 0 4.034389920584874,-10.642869115653347 h12.004166328120636 a9.108315894326587,9.108315894326587 0 0 0 8.811305593424633,-9.306322761594556 v-5.197680265784193 a9.083565035918088,9.083565035918088 0 0 0 -8.811305593424633,-9.306322761594556 " id="svg_3" class=""/>
                                </svg>
                                <div id="settingsTooltip"><%- lang('landing.settingsTooltip') %></div>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="lower">
        <div id="left">
            <div class="bot_wrapper">
                <div id="content">
                    <div id="server_status_wrapper">
                        <span class="bot_label" id="landingPlayerLabel"><%- lang('landing.serverStatus') %></span>
                        <span id="player_count"><%- lang('landing.serverStatusPlaceholder') %></span>
                    </div>
                    <div class="bot_divider"></div>
                    <div id="mojangStatusWrapper">
                        <span class="bot_label"><%- lang('landing.mojangStatus') %></span>
                        <span id="mojang_status_icon">&#8226;</span>
                        <div id="mojangStatusTooltip">
                            <div id="mojangStatusTooltipTitle"><%- lang('landing.mojangStatusTooltipTitle') %></div>
                            <div id="mojangStatusEssentialContainer">
                                <!-- Essential Mojang services are populated here. -->
                            </div>
                            <div id="mojangStatusNEContainer">
                                <div class="mojangStatusNEBar"></div>
                                <div id="mojangStatusNETitle"><%- lang('landing.mojangStatusNETitle') %></div>
                                <div class="mojangStatusNEBar"></div>
                            </div>
                            <div id="mojangStatusNonEssentialContainer">
                                <!-- Non Essential Mojang services are populated here. -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="center">
            <div class="bot_wrapper">
                <div id="content">
                    <button id="newsButton">
                        <div id="newsButtonAlert" style="display: none;"></div>
                        <svg xmlns="http://www.w3.org/2000/svg" id="mapsvg" viewBox="0 0 24 24" width="20" height="20"><path d="M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0ZM22,12a9.938,9.938,0,0,1-1.662,5.508l-1.192-1.193A.5.5,0,0,1,19,15.962V15a3,3,0,0,0-3-3H13a1,1,0,0,1-1-1v-.5a.5.5,0,0,1,.5-.5A2.5,2.5,0,0,0,15,7.5v-1a.5.5,0,0,1,.5-.5h1.379a2.516,2.516,0,0,0,1.767-.732l.377-.377A9.969,9.969,0,0,1,22,12Zm-19.951.963,3.158,3.158A2.978,2.978,0,0,0,7.329,17H10a1,1,0,0,1,1,1v3.949A10.016,10.016,0,0,1,2.049,12.963ZM13,21.949V18a3,3,0,0,0-3-3H7.329a1,1,0,0,1-.708-.293L2.163,10.249A9.978,9.978,0,0,1,17.456,3.63l-.224.224A.507.507,0,0,1,16.879,4H15.5A2.5,2.5,0,0,0,13,6.5v1a.5.5,0,0,1-.5.5A2.5,2.5,0,0,0,10,10.5V11a3,3,0,0,0,3,3h3a1,1,0,0,1,1,1v.962a2.516,2.516,0,0,0,.732,1.767l1.337,1.337A9.971,9.971,0,0,1,13,21.949Z"/></svg>
                        &#10;<span id="newsButtonText">MAP</span>
                    </button>
                </div>
            </div>
        </div>
        <div id="right">
            <div class="bot_wrapper">
                <div id="launch_content">
                    <button id="launch_button"><%- lang('landing.launchButton') %></button>
                    <div class="bot_divider"></div>
                    <button id="server_selection_button" class="bot_label"><%- lang('landing.launchButtonPlaceholder') %></button>
                </div>
                <div id="launch_details">
                    <div id="launch_details_left">
                        <span id="launch_progress_label">0%</span>
                        <div class="bot_divider"></div>
                    </div>
                    <div id="launch_details_right">
                        <progress id="launch_progress" value="22" max="100"></progress>
                        <span id="launch_details_text" class="bot_label"><%- lang('landing.launchDetails') %></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="newsContainer">
        <div id="dynmap-iframe-container">
            <div class="FloatingButtonContainer" id="center">
                <div class="bot_wrapper">
                    <div id="content">
                        <button id="dynmapDoneButton"> <!-- Rename all elements to dynmapEtc -->   
                            <div id="newsButtonAlert" style="display: none;"></div>
                            <svg id="newsButtonSVG" viewBox="0 0 24.87 13.97">
                                <defs>
                                   <style>.arrowLine{fill:none;stroke:#FFF;stroke-width:2px;}</style>
                                </defs>
                                <polyline class="arrowLine" points="0.71 13.26 12.56 1.41 24.16 13.02"/>
                            </svg>
                            &#10;<span id="dynmapDoneButtonText"><%- lang('landing.MapButton') %></span>
                        </button>
                    </div>
                </div> 
            </div>
            <div id="iframecontainer">
                <iframe id="dynmapiframe" src="https://mc.westeroscraft.com/#" frameborder="0"></iframe>
            </div>
            <script src="./assets/js/scripts/dynmap.js"></script>
        </div>
<!--        <div id="newsContent" article="-1" style="display: none;">-->
<!--            <div id="newsStatusContainer">-->
<!--                <div id="newsStatusContent">-->
<!--                    <div id="newsTitleContainer">-->
<!--                        <a id="newsArticleTitle" href="#">Lorem Ipsum</a>-->
<!--                    </div>-->
<!--                    <div id="newsMetaContainer">-->
<!--                        <div id="newsArticleDateWrapper">-->
<!--                            <span id="newsArticleDate">Mar 15, 44 BC, 9:14 AM</span>-->
<!--                        </div>-->
<!--                        <div id="newsArticleAuthorWrapper">-->
<!--                            <span id="newsArticleAuthor">by Cicero</span>-->
<!--                        </div>-->
<!--                        <a href="#" id="newsArticleComments">0 Comments</a>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div id="newsNavigationContainer">-->
<!--                    <button id="newsNavigateLeft">-->
<!--                        <svg id="newsNavigationLeftSVG" viewBox="0 0 24.87 13.97">-->
<!--                            <defs>-->
<!--                                <style>.arrowLine{fill:none;stroke:#FFF;stroke-width:2px;transition: 0.25s ease;}</style>-->
<!--                            </defs>-->
<!--                            <polyline class="arrowLine" points="0.71 13.26 12.56 1.41 24.16 13.02"/>-->
<!--                        </svg>-->
<!--                    </button>-->
<!--                    <span id="newsNavigationStatus"><%- lang('landing.newsNavigationStatus', { currentPage: 1, totalPages: 1 }) %></span>-->
<!--                    <button id="newsNavigateRight">-->
<!--                        <svg id="newsNavigationRightSVG" viewBox="0 0 24.87 13.97">-->
<!--                            <defs>-->
<!--                                <style>.arrowLine{fill:none;stroke:#FFF;stroke-width:2px;transition: 0.25s ease;}</style>-->
<!--                            </defs>-->
<!--                            <polyline class="arrowLine" points="0.71 13.26 12.56 1.41 24.16 13.02"/>-->
<!--                        </svg>-->
<!--                    </button>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div id="newsArticleContainer">-->
<!--                <div id="newsArticleContent">-->
<!--                    <div id="newsArticleContentScrollable">-->
<!--                        &lt;!&ndash; Article Content &ndash;&gt;-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div id="newsErrorContainer">-->
<!--            <div id="newsErrorLoading">-->
<!--                <span id="nELoadSpan" class="newsErrorContent"><%- lang('landing.newsErrorLoadSpan') %></span>-->
<!--            </div>-->
<!--            <div id="newsErrorFailed" style="display: none;">-->
<!--                <span id="nEFailedSpan" class="newsErrorContent"><%- lang('landing.newsErrorFailedSpan') %></span>-->
<!--                <button id="newsErrorRetry"><%- lang('landing.newsErrorRetryButton') %></button>-->
<!--            </div>-->
<!--            <div id="newsErrorNone" style="display: none;">-->
<!--                <span id="nENoneSpan" class="newsErrorContent"><%- lang('landing.newsErrorNoneSpan') %></span>-->
<!--            </div>-->
<!--        </div>-->
    </div>
    <script src="./assets/js/scripts/landing.js"></script>
</div>