<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Armando Register System for Fivem</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
        <!-- Font Awesome Pro -->
        <link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v6.3.0/css/pro.min.css">
    
        <!-- JavaScript Libraries -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" />
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
<body>
    <div class="container" v-show="Register.active || Login.active" :style="{ backgroundImage: randomBg }">
        <div class="bg"></div>
    
        <div class="Login" v-show="Register.active">
            <img src="logo.png" alt="">
            <div class="top">
                <p>AUTENTIFICARE</p>
                <p>Intregistreaza-te pe Rampage roleplay romania! Va trebui sa iti creezi un cont pentru a te putea juca</p>
            </div>
            <div class="inputs">
                <div class="input">
                    <input type="text" placeholder="Nume de utilizator" v-model="Register.NumeUtilizator" @focus="setFocus('NumeUtilizator')" @blur="removeFocus('NumeUtilizator')">
                    <i class="fa-solid fa-user" :style="{color: getIconColor('NumeUtilizator', Register)}"></i>
                </div>
                <div class="input">
                    <input type="email" placeholder="Adresa de e-mail" v-model="Register.Mail" @focus="setFocus('Mail')" @blur="removeFocus('Mail')">
                    <i class="fa-solid fa-envelope" :style="{color: getIconColor('Mail', Register)}"></i>
                </div>
                <div class="input">
                    <input type="password" placeholder="Parola contului" v-model="Register.Parola" @focus="setFocus('Parola')" @blur="removeFocus('Parola')">
                    <i class="fa-solid fa-shield-keyhole" :style="{color: getIconColor('Parola', Register)}"></i>
                </div>
                <div class="input">
                    <input type="text" placeholder="Introdu referral (lasa liber pentru nimic)" v-model="Register.Referal" @focus="setFocus('Referal')" @blur="removeFocus('Referal')" @input="validateReferal">
                    <i class="fa-solid fa-user-plus" :style="{color: getIconColor('Referal', Register)}"></i>
                </div>
            </div>
            <div class="Inapoi">
                <span @click="Button('Inapoi')">Mergi inapoi la meniul de logare!</span>
            </div>
            <div class="button" @click="Button('Register')">Creaza un cont >></div>
        </div>
    
        <div class="register" v-show="Login.active">
            <img src="logo.png" alt="">
            <div class="top">
                <p>AUTENTIFICARE</p>
                <p>Bine ai venit pe Rampage roleplay romania! Pentru a continua te rug sa te verifici</p>
            </div>
            <div class="inputs">
                <div class="input">
                    <input type="text" placeholder="Nume Utilizator" v-model="Login.NumeUtilizator" @focus="setFocus('NumeUtilizator')" @blur="removeFocus('NumeUtilizator')">
                    <i class="fa-solid fa-user" :style="{color: getIconColor('NumeUtilizator', Register)}"></i>
                </div>
                <div class="input">
                    <input type="password" placeholder="Parolă" v-model="Login.Parola" @focus="setFocus('Parola')" @blur="removeFocus('Parola')">
                    <i class="fa-solid fa-shield-keyhole" :style="{color: getIconColor('Parola', Register)}"></i>
                </div>
            </div>
            <div class="Forgotten-Password">
                <span @click="Button('Forgotten')">Ai uitat parola contului?</span>
            </div>
            <div class="button" @click="Button('Login')">Continua >></div>
            <div class="the-bec">
                <i class="fa-light fa-lightbulb"></i>
                <span>Nu ai un cont?</span>
                <span @click="Button('SwitchToRegister')">Înregistrează-te chiar acum!</span>
            </div>
        </div>

    
    </div>    
    
    <script src="index.js" defer></script>
  </body>
</html>