Design wird nicht angezeigt

Alex Sins · 7. Februar 2024

Guten Abend,

ich beschäftige mich gerade etwas mit FiveM und möchte gerne nach dem Betreten des Servers ein Login Fenster anzeigen lassen. Leider wird dieses jedoch nicht angezeigt.

Die Anzeige des Mauszeigers funktioniert jedoch. Hat da jemand einen Lösungsansatz für mich?

Ich demonstriere einfach mal den Quellcode.

Code: client.lua

Citizen.CreateThread(function()
    while not NetworkIsSessionStarted() do Wait(0) end
    SetNuiFocus(true, true)
    SendNuiMessage({
        event = 'login'
    })
end)

Code: fxmanifest.lua

fx_version "bodacious"
games {"gta5"}

author 'Juan Fiji'
description 'MySQL Login-/Register System'
version '1.0.0'

lua54 'yes'

client_scripts{
    "client.lua"
}

server_scripts{
    "server.lua",
    "@mysql-async/lib/MySQL.lua"
}

ui_page 'html/index.html'

files{
    'html/index.html',
    'html/style.css',
    'html/script.js',
    'html/img/*.jpg',
    'html/img/*.png' 
}

Alles anzeigen

Code: script.js

let ActiveButton = "#1";

function Reset(){
    $("#login-site, register-site").hide();
}

function OpenForm(form){
    Reset();
    if(form=="login"){
        $("#login-site").fadeIn();
    }
    else{
        $("#register-site").fadeIn();
    }
}

$("#1").click(function(){
    $(ActiveButton).removeClass("active");
    ActiveButton = "#1";
    $(ActiveButton).addClass("active");
    OpenForm("login");
 })

Alles anzeigen

HTML: index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Esegovic</title>
        <script src="nui://game/ui/jquery.js" type="text/javascript"></script>
        <script src="https://kit.fontawesome.com/16bcf16a73.js" crossorigin="anonymous"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="container">
            <img src="img/bg.jpg" id="background">
            <div id="main-ui"></div>
                <div id="login-register-shit">
                    <div id="button-section">
                        <div id="login"><span id="1" class="active">login</span></div>
                        <div id="register"><span id="2">register</span></div>
                    </div>
                    <div id="line"></div>
                    <div id="login-site">
                        <div id="login-user">
                            <div id="login-user-icon"><img src="img/username.png"></div>
                            <input type="input" placeholder="Name" id='login-username' required />
                              <label for="name" class="form__label">Username</label>
                        </div>
                        <div id="login-password">
                            <div id="login-password-icon"><img src="img/password.png"></div>
                            <input type="password" placeholder="Password" id='login-pass' required />
                              <label for="name" class="form__label">Password</label>
                        </div>
                        <div id="login-button">login</div>
                        <div id="password-forgot">Forgot Password?</div>
                    </div>
                    <div id="register-site">
                        <div id="reigster-user">
                            <div id="login-user-icon"><img src="img/username.png"></div>
                            <input type="input" placeholder="Name" id='register-username' required />
                              <label>Username</label>
                        </div>
                        <div id="register-password">
                            <div id="login-password-icon"><img src="img/password.png"></div>
                            <input type="password" placeholder="Password" id='register-pass' required />
                              <label>Password</label>
                        </div>
                        <div id="key-password">
                            <div id="login-password-icon"><img src="img/key.png"></div>
                            <span id="secretkey"></span>
                            <label>Secret Key</label>
                            <div id="hint">Copy-Paste Secret Key on your computer. Its an backup once you forgot your password.</div>
                        </div>
                        <div id="register-button">register</div>
                    </div>
                    <div id="forgot-password-site">
                        <div id="enter-secret-key">
                            <div id="login-password-icon"><img src="img/key.png"></div>
                            <label>Please Enter Secret Key</label>
                            <input type="input" placeholder="Your Secret Key" id='sKey' required />
                            <div id="hint2">If You dont remember your secret key please delete Account.</div>
                        </div>
                        <div id="delete-account">delete account</div>
                        <div id="reset-pass">reset</div>
                    </div>
                </div>

                <div id="notify">
                    <img src="img/msg.png">
                    <span id="notify-message"></span>
                </div>
            </div>
        </div>
        <script src="script.js"></script>
    </body>
</html>

Alles anzeigen