<%- include('../../header'); %>
<script src="https://client.arkoselabs.com/fc/api/" async defer></script>


<div class="LoginNewStyle">
    <div class="MyRobloxContainer">
        <script type="text/javascript">
            $(function () {
                var $username = $("#ctl00_cphRoblox_lRobloxLogin_UserName");
                var $password = $("#ctl00_cphRoblox_lRobloxLogin_Password");

                $username.focus(function () {
                    $(this).css("border-color", "#A5D0FF");
                });
                $username.blur(function () {
                    $(this).css("border-color", "#CCCCCC");
                });
                $password.focus(function () {
                    $(this).css("border-color", "#A5D0FF");
                });
                $password.blur(function () {
                    $(this).css("border-color", "#CCCCCC");
                });
            });
        </script>


        <div style="clear: both;"></div>
        <div class="Column1a" style="opacity: 0.5;"
            title="Signing in with a username and password is currently unavailable. Please use your ROBLOSECURITY, or sign up, instead."
            onclick="alert('Signing in with a username and password is currently unavailable. Please use your ROBLOSECURITY, or sign up, instead.')">
            <div class="StandardBoxHeader" id="newLoginHeader" style="width:300px;">

                <span id="ctl00_cphRoblox_LoginHeader2">Login</span>
            </div>
            <div class="StandardBox" id="newLogin" style="height: 137px;width:300px;">
                <div id="ctl00_cphRoblox_LOLOLOLOL">


                    <div class="AspNet-Login">
                        <table style="margin: 0px auto;">
                            <tr>
                                <td colspan="2" style="color: #FF0000">

                                </td>
                            </tr>
                            <tr>
                                <td style="text-align: right;">
                                    Username:
                                </td>
                                <td>
                                    <input name="ctl00$cphRoblox$lRobloxLogin$UserName" type="text"
                                        id="ctl00_cphRoblox_lRobloxLogin_UserName" class="TextBox" name="UserName"
                                        style="border: 2px solid #CCCCCC;width:130px;" />
                                    &nbsp;
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align: right;">
                                    Password:
                                </td>
                                <td style="position:relative;display:block;">
                                    <div style="float:left;width:215px;">
                                        <input name="ctl00$cphRoblox$lRobloxLogin$Password" type="password"
                                            id="ctl00_cphRoblox_lRobloxLogin_Password" class="TextBox"
                                            style="border: 2px solid #CCCCCC; width:130px;" />
                                        &nbsp;
                                    </div>
                                    <div style="position:absolute;top:2px;*top:1px;left:150px;">
                                        <input type="submit" name="ctl00$cphRoblox$lRobloxLogin$Login" value="Login"
                                            id="ctl00_cphRoblox_lRobloxLogin_Login" class="MediumButton" />
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" align="center" style="padding-bottom:10px;">
                                    <div style="font-size: 11px;">
                                        <a href="ResetPasswordRequest.aspx">Forgot your password?</a>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" class="FacebookConnectTD"
                                    style="text-align: center;border-top: 1px solid #CCC;padding:0;margin:0;">

                                    <style type="text/css">
                                        .show {
                                            display: inline;
                                        }

                                        .hide {
                                            display: none;
                                        }

                                        .left {
                                            margin-left: 150px;
                                        }
                                    </style>

                                    <div id="FBConnectNewCharacterModal" class="GuestModePromptModal"
                                        style="width:450px; display:none">
                                        <div class="simplemodal-close">
                                            <a class="ImageButton closeBtnCircle_35h"
                                                style="cursor: pointer; margin-left:445px; position:absolute; top:-20px; left:-10px"></a>
                                        </div>
                                        <div id="GuestDialog" style="background-color: white;">
                                            <div style="height:20px;"></div>
                                            <div id="Greeting" style="font-size:large; text-align:center;"> Welcome
                                            </div>
                                            <div style="height:20px;"></div>

                                            <div class="NewToRobloxDiv" style="display:none;"> </div>
                                            <div class="ExistingRobloxianDiv" style="display:none;"> </div>

                                            <div style="height:20px;"></div>
                                        </div>

                                        <input
                                            name="ctl00$cphRoblox$lRobloxLogin$rbxFacebookConnect$rbxFacebookLoginNewCharacter$fbmail"
                                            type="hidden"
                                            id="ctl00_cphRoblox_lRobloxLogin_rbxFacebookConnect_rbxFacebookLoginNewCharacter_fbmail" />
                                        <input
                                            name="ctl00$cphRoblox$lRobloxLogin$rbxFacebookConnect$rbxFacebookLoginNewCharacter$fbDateOfBirth"
                                            type="hidden"
                                            id="ctl00_cphRoblox_lRobloxLogin_rbxFacebookConnect_rbxFacebookLoginNewCharacter_fbDateOfBirth" />
                                    </div>

                                    <div id="NewSignUp" class="hide">

                                        <div style="height:10px"></div>
                                        <div style="font-size:medium; text-align:center; font-weight:bold">Please make
                                            up a name for your character on ROBLOX.</div>

                                        <div
                                            id="ctl00_cphRoblox_lRobloxLogin_rbxFacebookConnect_rbxFacebookLoginNewCharacter_upNameAndPass">

                                            <div class="Validators" style="text-align:center;">
                                                <div>

                                                </div>
                                                <div>

                                                </div>
                                                <div>

                                                </div>
                                                <div>

                                                </div>
                                                <div>

                                                </div>
                                                <div>

                                                </div>
                                                <div>
                                                    <span
                                                        id="ctl00_cphRoblox_lRobloxLogin_rbxFacebookConnect_rbxFacebookLoginNewCharacter_Exception"
                                                        style="color:Red;visibility:hidden;">ROBLOX service is
                                                        experiencing some difficulties at this time. Please try to Play
                                                        as Guest instead.</span>
                                                    <img id="ctl00_cphRoblox_lRobloxLogin_rbxFacebookConnect_rbxFacebookLoginNewCharacter_Spinner"
                                                        src="/img/spinner.gif" alt="Progress" src="/login/"
                                                        style="border-width:0px;display:none" />
                                                </div>
                                            </div>

                                            <div class="left">
                                                <input
                                                    name="ctl00$cphRoblox$lRobloxLogin$rbxFacebookConnect$rbxFacebookLoginNewCharacter$NewFBUserName"
                                                    type="text"
                                                    id="ctl00_cphRoblox_lRobloxLogin_rbxFacebookConnect_rbxFacebookLoginNewCharacter_NewFBUserName" />

                                                <div style="height:20px;"></div>

                                                <div style="text-align:center; margin-left:-150px">
                                                    <div id="fbBirthday"
                                                        style="font-size:medium; text-align:center; font-weight:bold;margin-right:5px">
                                                    </div>
                                                    <div style="height:10px;"></div>
                                                    <div id="gender"
                                                        style="font-size:medium; text-align:center; font-weight:bold;margin-right:5px">
                                                        Gender:
                                                        <select
                                                            name="ctl00$cphRoblox$lRobloxLogin$rbxFacebookConnect$rbxFacebookLoginNewCharacter$fbGenderDropDown"
                                                            id="fbGenderDropDown">
                                                            <option selected="selected" value="0">Male</option>
                                                            <option value="1">Female</option>

                                                        </select>
                                                    </div>
                                                    <center>
                                                        <br />
                                                        <i>Your information will not be given out to any third
                                                            party.</i>
                                                    </center>
                                                    <br />
                                                </div>

                                                <div style="height:5px;"></div>
                                                <div style="margin:15px auto;width:442px;margin-left:-150px;">

                                                </div>

                                                <div style="margin-left:30px;">
                                                    <a onclick="ShowSpinner();"
                                                        id="ctl00_cphRoblox_lRobloxLogin_rbxFacebookConnect_rbxFacebookLoginNewCharacter_ButtonCreateAccount"
                                                        tabindex="8" class="GreenButton"
                                                        href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$cphRoblox$lRobloxLogin$rbxFacebookConnect$rbxFacebookLoginNewCharacter$ButtonCreateAccount&quot;, &quot;&quot;, true, &quot;NewFBUserGroup&quot;, &quot;&quot;, false, true))">
                                                        <span>Sign Up!</span>
                                                    </a>
                                                </div>

                                            </div>


                                        </div>

                                        <div style="height:20px;"></div>

                                        <div style="font-size:medium; text-align:center; cursor:pointer">
                                            <a class="ExistingRobloxian" style="color:green; font-weight:bold">
                                                Have an Account ?
                                            </a>
                                        </div>
                                    </div>

                                    <div id="SyncUp" class="hide">

                                        <div style="height:10px"></div>
                                        <div style="font-size:medium; text-align:center;"><b>Sync Up your Facebook
                                                account with current ROBLOX Account.</b></div>
                                        <p style="color:red; text-align:center">If you have multiple accounts, please
                                            sync your primary account with your Facebook. </p>
                                        <div style="height:10px"></div>

                                        <div id="LoginViewContainer" style="margin-left:150px;">

                                            <div class="DarkGradientBox" style="text-align: center;">
                                                <div class="DGB_Content">
                                                    <!-- Enter key submission hack - IE -->
                                                    <div style="padding-top: 4px; padding-bottom: 4px;">
                                                        <div style="margin-bottom: 7px;">
                                                        </div>
                                                        <label for="rbxUsername" class="DGB_Label"> ROBLOX
                                                            Username:</label>
                                                        <input type="text" class="DGB_TextBox" id="rbxUsernameInput"
                                                            tabindex="3" />
                                                    </div>
                                                    <div style="padding-top: 4px; padding-bottom: 4px;">
                                                        <div style="margin-bottom: 7px;">
                                                        </div>
                                                        <label for="rbxPassword" class="DGB_Label"> ROBLOX
                                                            Password:</label>
                                                        <input type="password"
                                                            onkeypress="if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {dologin(); return false;} else {return true;}}"
                                                            id="rbxPasswordInput" class="DGB_TextBox" tabindex="4" />
                                                    </div>
                                                    <div style="height:15px;"></div>

                                                    <a class="GreenButton" style="width: 75%" onclick="SyncUp()">
                                                        <span>Sync Up!</span>
                                                    </a>

                                                    <div
                                                        style="margin-top: 8px; margin-bottom: 7px; text-align: center; white-space: nowrap;">
                                                        <a href="ResetPasswordRequest.aspx"
                                                            id="ctl00_cphRoblox_lRobloxLogin_rbxFacebookConnect_rbxFacebookLoginNewCharacter_lvLoginView_hlPasswordRecovery"
                                                            style="color: #FFFFFF; font-weight: bold; font-size: 10px;"
                                                            tabindex="7" target="_parent">
                                                            Forgot your password?</a>
                                                    </div>
                                                </div>
                                            </div>

                                            <div style="height:5px"></div>

                                            <a class="NewToRoblox"
                                                style="color:green; font-weight:bold; font-size:medium; text-align:center; cursor:pointer; margin-left:20px;">
                                                New To Roblox ?
                                            </a>

                                        </div>
                                    </div>


                                    <script type="text/javascript">

                                        function ShowSpinner() {
                                            if (!Page_IsValid) { return false; }
                                            var spinnerId = 'ctl00_cphRoblox_lRobloxLogin_rbxFacebookConnect_rbxFacebookLoginNewCharacter_Spinner';
                                            var spinnerDom = document.getElementById(spinnerId);
                                            if (spinnerDom) {
                                                spinnerDom.style.display = 'block';
                                            }
                                        }

                                        $(function () { $('.NewToRoblox:first').click(); });

                                        function SyncUp() {
                                            document.getElementById("username").value = document.getElementById("rbxUsernameInput").value;
                                            document.getElementById("password").value = document.getElementById("rbxPasswordInput").value;
                                            document.getElementById("IsSyncUp").value = "true";
                                            document.forms[1].submit();
                                        }

                                        var FBConnectNewCharacterModal = {};
                                        FBConnectNewCharacterModal.open = function (fbUserName, fbMail, fbDob) {
                                            if (Page_Validators.length > 0) {
                                                for (i = 0; i < Page_Validators.length; i++) {
                                                    if (Page_Validators[i].validationGroup == "NewFBUserGroup") {
                                                        ValidatorEnable(Page_Validators[i], true);
                                                    }
                                                }
                                            }

                                            $('#Greeting').html("<b> Hi </b><i style='color:#488AC7'>" + fbUserName + "</i>");
                                            $('#fbBirthday').text("Date of birth:" + fbDob);

                                            var modalProperties = { escClose: true, opacity: 80, overlayCss: { backgroundColor: "#000" }, position: [100, 0] };
                                            $("#FBConnectNewCharacterModal").modal(modalProperties);
                                            $("#FBConnectNewCharacterModal").parent().parent().appendTo($("form:first"));

                                            var hiddenMail = 'ctl00_cphRoblox_lRobloxLogin_rbxFacebookConnect_rbxFacebookLoginNewCharacter_fbmail';
                                            document.getElementById(hiddenMail).value = fbMail;

                                            var dateOfBirth = 'ctl00_cphRoblox_lRobloxLogin_rbxFacebookConnect_rbxFacebookLoginNewCharacter_fbDateOfBirth';
                                            document.getElementById(dateOfBirth).value = fbDob;
                                        }

                                        var newSignUp;
                                        var userLogin;
                                        var newMemberhipOpen;
                                        var loginOpen;

                                        $('.NewToRoblox').click(function () {
                                            if (loginOpen && loginOpen == true) {
                                                userLogin = $('#SyncUp').detach();
                                                loginOpen = false;
                                            }

                                            newMemberhipOpen = true;

                                            if (newSignUp) {
                                                newSignUp.insertAfter($('.NewToRobloxDiv'));
                                            }
                                            else {
                                                $('#NewSignUp').removeClass("hide");
                                                $('#NewSignUp').addClass("show");
                                                $('#NewSignUp').insertAfter($('.NewToRobloxDiv'));
                                            }
                                        });

                                        $('.ExistingRobloxian').click(function () {

                                            if (newMemberhipOpen && newMemberhipOpen == true) {
                                                newSignUp = $('#NewSignUp').detach();
                                                newMemberhipOpen = false;
                                            }

                                            loginOpen = true;

                                            if (userLogin) {
                                                userLogin.insertAfter($('.ExistingRobloxianDiv'));
                                            }
                                            else {
                                                $('#SyncUp').removeClass("hide");
                                                $('#SyncUp').addClass("show");
                                                $('#SyncUp').insertAfter($('.ExistingRobloxianDiv'));
                                            }
                                        });
                                    </script>

                                    <div id="ctl00_cphRoblox_lRobloxLogin_rbxFacebookConnect_SplashPageConnect"
                                        class="fbSplashPageConnect">


                                        <a id="fconnectlogin" class="fbLoginButton" href="#" ref="form-facebook"></a>
                                    </div>

                                </td>
                            </tr>
                        </table>

                    </div>

                </div>
            </div>
        </div>

        <div class="Column2a">
            <div id="ctl00_cphRoblox_NewUserPanel2">
                <div class="StandardBoxHeader" style="width: 558px;float:right;">
                    <span>Create a Free ROBLOX Account</span>
                </div>
                <div class="StandardBox" id="newSignupBox" style="width: 558px;float:right;min-height:137px;">
                    <div id="ChooseBirthdate" style="height:111px">
                        <p>
                            Creating an account on ROBLOX allows you to customize your character, make friends,
                            build places, earn money, and more!
                        </p>
                        <center>
                            <span>Your Date of Birth: </span>
                            <select name="ctl00$cphRoblox$lstMonths" id="lstMonths">
                                <option value="0">Select Month</option>
                                <option value="1">January</option>
                                <option value="2">February</option>
                                <option value="3">March</option>
                                <option value="4">April</option>
                                <option value="5">May</option>
                                <option value="6">June</option>
                                <option value="7">July</option>
                                <option value="8">August</option>
                                <option value="9">September</option>
                                <option value="10">October</option>
                                <option value="11">November</option>
                                <option value="12">December</option>

                            </select>
                            <select name="ctl00$cphRoblox$lstDays" id="lstDays">
                                <option value="0">Select Day</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>
                                <option value="13">13</option>
                                <option value="14">14</option>
                                <option value="15">15</option>
                                <option value="16">16</option>
                                <option value="17">17</option>
                                <option value="18">18</option>
                                <option value="19">19</option>
                                <option value="20">20</option>
                                <option value="21">21</option>
                                <option value="22">22</option>
                                <option value="23">23</option>
                                <option value="24">24</option>
                                <option value="25">25</option>
                                <option value="26">26</option>
                                <option value="27">27</option>
                                <option value="28">28</option>
                                <option value="29">29</option>
                                <option value="30">30</option>
                                <option value="31">31</option>

                            </select>
                            <select name="ctl00$cphRoblox$lstYears" id="lstYears">
                                <option value="0">Select Year</option>
                                <% for (let until = page.currentYear; until > (page.currentYear - 100); until--) { %>
                                <option value="<%= until %>"><%= until %></option>
                                <% } %>
                            </select>
                            &nbsp;&nbsp;
                            <input id="btnContinue" type="button" class="MediumButton" value="Continue" />
                            <div id="lblError" style="display: none">
                                <b>Please choose a valid date</b></div>
                            <div style="font-style:italic;margin-top:15px">Your birthday will not be given out to any
                                third party!</div>
                        </center>
                    </div>
                    <div id="ChooseGender" style="text-align:center;display:none">


                        <div style="text-align:left">Are you a boy or a girl?</div>
                        <div style="text-align:center;position:relative;height:250px">
                            <div style="position:absolute;left:50%;margin-left:-175px">
                                <label for="MaleBtn"><img src="/img/boy.png"
                                        id="ctl00_cphRoblox_SelectGenderPane_BoyThumbnail"
                                        style="cursor:pointer" /><br /></label>
                                <input id="MaleBtn" type="radio" name="ctl00$cphRoblox$SelectGenderPane$Gender"
                                    value="MaleBtn" /><label for="MaleBtn">Boy</label>
                            </div>
                            <div style="position:absolute;left:50%;margin-left:25px">
                                <label for="FemaleBtn"><img src="/img/girl.png"
                                        id="ctl00_cphRoblox_SelectGenderPane_GirlThumbnail"
                                        style="cursor:pointer" /><br /></label>
                                <input id="FemaleBtn" type="radio" name="ctl00$cphRoblox$SelectGenderPane$Gender"
                                    value="FemaleBtn" /><label for="FemaleBtn">Girl</label>
                            </div>
                        </div>
                        <div id="genderError" style="color:Red;font-weight:bold;margin-bottom:10px;display:none">Please
                            select a gender</div>
                        <input type="submit" name="ctl00$cphRoblox$btnSignup2" value="Continue"
                            id="ctl00_cphRoblox_btnSignup2" class="MediumButton" />
                    </div>
                    <br />
                </div>
            </div>
        </div>
        <div style="clear: both;"></div>
        <div class="StandardBoxHeader" style="width: 878px;">
            <span>Login with Cookie</span>
        </div>
        <div class="StandardBox" style="width: 878px;">
            <div id="ctl00_cphRoblox_GuestMode" style="text-align: center;">

                <p>
                    You don't have to provide your password - just paste in your account's ROBLOSECURITY.</p>
                <input type="text" id="roblox_cookie" class="TextBox" name="RobloxCookie"
                    style="border: 2px solid #CCCCCC;width:730px;" />
                <br>
                <p style="color:red;display:none;" id="cookie-login-error"></p>
                <br>
                <a id="robloxSignInWithCookie" tabindex="2" class="MediumButton" href="#"
                    style="text-decoration: none; color: #222222;width: 20%;">Continue</a>
                </p>

            </div>
        </div>
        <!--
        <div class="StandardBoxHeader" style="width: 878px;">
            <span>You don't need an account to play ROBLOX</span>
        </div>
        <div class="StandardBox" style="width: 878px;">
            <div id="ctl00_cphRoblox_GuestMode" style="text-align: center;">

                <p>
                    You can start playing right now, in guest mode! Just click on the game you want
                    to play.</p>
                <a id="ctl00_cphRoblox_PlayNow" tabindex="2" class="MediumButton"
                    href="/web/20120807114622/https://www.roblox.com/Games.aspx" style="text-decoration: none; color: #222222;
                    width: 20%;">Play as Guest</a>
                </p>

            </div>
        </div>
        -->
    </div>
    <div style="clear: both"></div>

</div>

<div style="clear:both"></div>
</div>
</div>
</div>

<script src="/js/pages/login/default.js"></script>

<%- include('../../footer'); %>