Jump to content

Create page login guest


chat5html

17 views

 Share

If you want to create a guest login page, it's straightforward. I've provided you with a code that you can easily integrate into your website;

 

HTML and CSS:

Background and Style:

I chosen a background for the page and styled it with CSS to center the content, creating an appealing look.

Login Form:

I created a login form named loginForm with fields for the nickname, age, and gender. These fields are contained in a visible block with the class block_access_verific.

Welcome Message:

I prepared a block named block_access_nickname initially hidden. This block will be displayed when the user has provided the required information.

JavaScript:

Function to Change Nickname:

I created a cambia_nick() function allowing users to change their nickname. When activated, it hides the current nickname block and displays the input fields block (block_access_verific).

Local Storage Check:

Upon page load, I check if there are already saved details in Local Storage (nickname, age, and gender). If yes, I automatically fill the form fields with these values.

Form Handling:

When a user submits the form, I check if the entered nickname is valid (no special characters, spaces, and not exceeding 20 characters). If valid, I save the data in Local Storage.

Additional Notes:

I use localStorage to make the user experience persistent across sessions.

Nickname validation is performed using the isValidNickname function.

The form is set to send data to a link (action="mylink"). Make sure this link correctly handles the form data.

I hope this provides a clear understanding of what the code is doing!

 

 

Quote

<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, partial-scale=1">
    <style>
        body {
            background-image: url(image) !importante;
            dimensione dello sfondo: copertina !importante;
            display: flessibile;
            allineare gli elementi: centro;
            giustifica-contenuto: centro;
            altezza: 100vh;
            margine: 0;
            famiglia di caratteri: Arial, sans-serif;
        }

        #login-form {
            imbottitura: 20px;
            raggio del bordo: 8px;
            allineamento testo: centro;
            larghezza: 300px;
            sfondo: #fff;
        }

        input,
        seleziona {
            margine-bottom: 10px;
            imbottitura: 8px;
            larghezza: calc(100% - 16px);
            dimensionamento del box: border-box;
            sfondo: #fff !importante;
        }

        pulsante {
            imbottitura: 10px;
            colore di sfondo: #4CAF50;
            colore bianco;
            bordo: nessuno;
            raggio del bordo: 4px;
            cursore: puntatore;
            larghezza: 100%;
            margine superiore: 9px;
        }

        .block_access_nickname {
            display: nessuno;
        }

        .cambia_nick {
            colore: #000;
            sfondo: #E8F5E9;
            imbottitura: 5px;
            margine superiore: 23px;
            cursore: puntatore;
        }
    </style>
</head>

<body>
    <div id="login-form">
        <h2>Accedi | Scegli il nickname</h2>
        <form id="loginForm" Method="POST" action="mylink">
            <div class="block_access_verific">
                <input type="text" id="nickname" name="nickname" placeholder="Nickname" richiesto>
                <input type="number" id="age" name="age" placeholder="Età (1-100)" min="1" max="100" richiesto>
                <select id= "gender" name="gender" richiesto>
                    <option value="1">Maschio</option>
                    <option value="2">Femmina</option>
                </select>
            </div>
            <div class="block_access_nickname "></div>
            <button type="submit" id="submitBtn">Entra nella chat</button>
        </form>
    </div>

    <script>
        function cambia_nick() {
            var storedNickname = localStorage.getItem('nickname');
            blockAccessNickname.style.display = 'nessuno';
            var blockAccessVerific = document.querySelector('.block_access_verific');
            blockAccessVerific.style.display = 'blocca';
        }

        var blockAccessVerific = document.querySelector('.block_access_verific');
        var blockAccessNickname = document.querySelector('.block_access_nickname');

        if (localStorage.getItem('nickname') && localStorage.getItem('age') && localStorage.getItem('gender')) {
            blockAccessVerific.style.display = 'none';
            var storedNickname = localStorage.getItem('nickname');
            blockAccessNickname.innerHTML = 'Stai usando il nickname <b>' + storedNickname + '</b> <br> <div class="cambia_nick" onclick="cambia_nick()">Cambia</div>';
            blockAccessNickname.style.display = 'blocca';
        }

        window.onload = function() {
            var storedNickname = localStorage.getItem('nickname');
            var storedAge = localStorage.getItem('age');
            var storedGender = localStorage.getItem('gender');

            if (storedNickname && StoredAge && StoredGender) {
                document.getElementById('nickname').value = StoredNickname;
                document.getElementById('age').value = storedAge;
                document.getElementById('gender').value = storedGender;
            }
        };

        document.getElementById('loginForm').addEventListener('submit', function(event) {
            var nickname = document.getElementById('nickname').value;
            if (!isValidNickname(nickname)) {
                alert('Il nickname non può contenere caratteri speciali, spazi o superare i 20 caratteri.');
                event.preventDefault();
                return;
            }

            var età = document.getElementById('età').value;
            localStorage.setItem('nickname', nickname);
            localStorage.setItem('età', età);
            localStorage.setItem('gender', document.getElementById('gender').value);
        });

        function isValidNickname(nickname) {
            var regex = /^[a-zA-Z0-9]+$/;
            return regex.test(soprannome) && soprannome.lunghezza <= 20;
        }
    </script>

</corpo>

</html>

 

 Share

0 Comments


Recommended Comments

There are no comments to display.

×
×
  • Create New...