AVÍS AMB CONTRASENYA

 Aquest codi et mostra un avís en el que has de posar una contrasenya perquè et deixi accedir.

Deixa inútil 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.

Un gran desavantatge que té és que si s'inspecciona, es pot trobar la clau fàcilment.


CONTRASENYA CORRECTA: Contrasenya123


<!DOCTYPE html>

<html lang="ca">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1" />

<title>Avís amb Contrasenya</title>

<style>

  body, html {

    margin: 0; padding: 0; height: 100%;

    font-family: Arial, sans-serif;

    background: #f0f0f0;

  }

  #passwordModal {

    position: fixed;

    top: 0; left: 0; right: 0; bottom: 0;

    background: rgba(0,0,0,0.5);

    display: flex;

    justify-content: center;

    align-items: center;

  }

  #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>


<div id="passwordModal">

  <div id="modalContent">

    <h2>Introdueix la contrasenya</h2>

    <input type="password" id="passwordInput" placeholder="Contrasenya" />

    <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';

    } else {

      errorMsg.style.display = 'block';

    }

  }

</script>


</body>

</html>

Comentaris