Untitled

HTML:
<!doctype html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .background{ width: 300px; height: 350px; background-color: white; position: absolute; left: 50%; top: 50%; margin-top: -175px; margin-left: -150px; border-radius: 50px; }
        .heading{text-align: center; font-size: 20pt;}
        .input{ width: 95%; border: none; margin-top: 20px; height: 38px; margin-left: 2.5%; }
        .loginBtn{ width: 100%; position: relative; height: 40px; margin-top: 15px; }
    </style>
</head>
<body>
    <div class="background">
        <div class="heading">Login</div>
        <form>
            <input class="input" type="text" id="username" placeholder="Username" />
            <input class="input" type="password" id="password" placeholder="Password" />
            <button class="loginBtn" onclick="logUser()" id="loginBtn">Login</button>
        </form>
    </div>
</body>
</html>

<script>
    function logUser() {
        var username = $("#username").val();
        var password = $("#password").val();
        resourceCall("tryLogin", username, password);
    }
</script>


Startup.js:
// ON STARTUP-LOAD
function onLoad(args) {
    var cameraPositionStartup = args[0]; // Getting the CameraPosition
    var vinewoodCam = API.createCamera(cameraPositionStartup, new Vector3()); // Create a Camera
    API.setActiveCamera(vinewoodCam);// Set the Camera Active
    //API.setHudVisible(false); // Disabling the HUD
    openLogin();
}

var myBrowser = null;

function openLogin() {
    var res = API.getScreenResolution(); //this gets the client's screen resoulution
    myBrowser = API.createCefBrowser(res.Width, res.Height); //we're initializing the browser here. This will be the full size of the user's screen.
    API.waitUntilCefBrowserInit(myBrowser); //this stops the script from getting ahead of itself, it essentially pauses until the browser is initialized
    API.setCefBrowserPosition(myBrowser, 0, 0); //The orientation (top left) corner in relation to the user's screen.  This is useful if you do not want a full page browser.  0,0 is will lock the top left corner of the browser to the top left of the screen.
    API.loadPageCefBrowser(myBrowser, "Client/Startup/Login.html"); //This loads the HTML file of your choice.      .    API.setCefBrowserHeadless(myBrowser, true); //this will remove the scroll bars from the bottom/right side
    API.showCursor(true); //This will show the mouse cursor
    API.setCanOpenChat(false);  //This disables the chat, so the user can type in a form without opening the chat and causing issues.

}

function tryLogin(Username, Password) {
    API.sendChatMessage("Your username is " + Username + " and your password is " + Password); //send a chat message with the data they entered.
    API.showCursor(false); //stop showing the cursor
    API.destroyCefBrowser(myBrowser); //destroy the CEF browser
    API.setCanOpenChat(true); //allow the player to use the chat again.
}