Create page login guest
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>
0 Comments
Recommended Comments
There are no comments to display.