AVÍS AMB CONTRASENYA I FONS OPAC
Aquest codi et mostra un avís en el que has de posar una contrasenya perquè et deixi accedir.
No permet interacció amb algunes opcions a la web on es posi, tot i així, alunes funcions no es bloquegen encara que no s'hagi posat la contrasenya correcta,deixa el fons opac, completament negre.
Un gran desavantatge que té és que si s'inspecciona, es pot trobar la clau fàcilment.
CONTRASENYA CORRECTA: Contrasenya123
<html lang="ca">
<head>
<meta charset="UTF-8"></meta>
<meta content="width=device-width, initial-scale=1" name="viewport"></meta>
<title>Avís amb Contrasenya</title>
<style>
body, html {
margin: 0; padding: 0; height: 100%;
font-family: Arial, sans-serif;
background: #f0f0f0;
}
/* Bloqueja el scroll quan el modal està actiu */
body.modal-active {
overflow: hidden;
}
#passwordModal {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: #000000; /* fons completament negre */
display: flex;
justify-content: center;
align-items: center;
z-index: 9999; /* per sobre de tot */
}
#modalContent {
background: white;
padding: 20px 30px;
border-radius: 8px;
box-shadow: 0 0 15px rgba(0,0,0,0.3);
text-align: center;
width: 300px;
}
input[type="password"] {
width: 100%;
padding: 8px;
margin-top: 10px;
font-size: 16px;
}
button {
margin-top: 15px;
padding: 8px 15px;
font-size: 16px;
cursor: pointer;
}
#errorMsg {
color: red;
margin-top: 10px;
display: none;
}
</style>
</head>
<body class="modal-active">
<div aria-modal="true" id="passwordModal" role="dialog">
<div id="modalContent">
<h2>Introdueix la contrasenya</h2>
<input id="passwordInput" placeholder="Contrasenya" type="password" />
<button onclick="checkPassword()">Envia</button>
<div id="errorMsg">Contrasenya incorrecta. Torna-ho a provar.</div>
</div>
</div>
<script>
function checkPassword() {
const input = document.getElementById('passwordInput').value;
const errorMsg = document.getElementById('errorMsg');
if (input === 'Contrasenya123') {
document.getElementById('passwordModal').style.display = 'none';
document.body.classList.remove('modal-active'); // permetre scroll i interacció
} else {
errorMsg.style.display = 'block';
}
}
</script>
</body>
</html>
Comentaris
Publica un comentari a l'entrada