Saisie du mot de passe Lumière

2,646 0 Champs et interrupteurs Andev.web Suivre

Remixer Ouvrir dans l'éditeur Plein écran Discuter Publiez votre code

Recommandé

18 June 2025

Un code de ByBy.inc

26 December 2024

Un code par efficientcloud646

15 April 2026

Pokémon Lune Émeraude Extrême Aléatoire

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Andev Web</title>
</head>
<body>
    
<form onsubmit="return false">
    <div class="form-item">
      <label>Username</label>
      <div class="input-wrapper">
        <input type="text" id="username" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" data-lpignore="true"/>
      </div>
    </div>
    <div class="form-item">
      <label>Password</label>
      <div class="input-wrapper">
        <input type="password" id="password" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" data-lpignore="true"/>
        <button type="button" id="eyeball">
          <div class="eye"></div>
        </button>
        <div id="beam"></div>
      </div>
    </div>
    <button id="submit">Sign in</button>
  </form>
  <script src="main.js"></script>
</body>
</html>

CSS

:root {
  --bgColor: white;
  --inputColor: black;
  --outlineColor: dodgerblue;
  --beamColor: yellow;
  --spacer: 1rem;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
  background: var(--bgColor);
  overflow: hidden;
}
body.show-password {
  --bgColor: black;
  --inputColor: white;
  --outlineColor: var(--beamColor);
}

form {
  transform: translate3d(0, 0, 0);
  padding: var(--spacer);
}
form > * + * {
  margin-top: var(--spacer);
}

.form-item > * + * {
  margin-top: 0.5rem;
}

label,
input,
button {
  font-size: 1.5rem;
  font-family: monospace;
  color: var(--inputColor);
}
label:focus,
input:focus,
button:focus {
  outline: 3px solid var(--outlineColor);
  outline-offset: 2px;
}
label::-moz-focus-inner,
input::-moz-focus-inner,
button::-moz-focus-inner {
  border: none;
}
label[id=password],
input[id=password],
button[id=password] {
  color: black;
}

button {
  border: none;
}

[id=submit] {
  cursor: pointer;
  margin: calc(var(--spacer) * 2) 0 0 2px;
  padding: 0.75rem 1.25rem;
  color: var(--bgColor);
  background-color: var(--inputColor);
  box-shadow: 4px 4px 0 rgba(30, 144, 255, 0.2);
}
[id=submit]:active {
  transform: translateY(1px);
}

.input-wrapper {
  position: relative;
}

input {
  padding: 0.75rem 4rem 0.75rem 0.75rem;
  width: 100%;
  border: 2px solid transparent;
  border-radius: 0;
  background-color: transparent;
  box-shadow: inset 0 0 0 2px black, inset 6px 6px 0 rgba(30, 144, 255, 0.2), 3px 3px 0 rgba(30, 144, 255, 0.2);
  -webkit-appearance: none;
}
input:focus {
  outline-offset: 1px;
}
.show-password input {
  box-shadow: inset 0 0 0 2px black;
  border: 2px dashed white;
}
.show-password input:focus {
  outline: none;
  border-color: var(--beamColor);
}

[id=eyeball] {
  --size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  position: absolute;
  top: 50%;
  right: 0.75rem;
  border: none;
  background-color: transparent;
  transform: translateY(-50%);
}
[id=eyeball]:active {
  transform: translateY(calc(-50% + 1px));
}

.eye {
  width: var(--size);
  height: var(--size);
  border: 2px solid var(--inputColor);
  border-radius: calc(var(--size) / 1.5) 0;
  transform: rotate(45deg);
}
.eye:before, .eye:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border-radius: 100%;
}
.eye:before {
  width: 35%;
  height: 35%;
  background-color: var(--inputColor);
}
.eye:after {
  width: 65%;
  height: 65%;
  border: 2px solid var(--inputColor);
  border-radius: 100%;
}

[id=beam] {
  position: absolute;
  top: 50%;
  right: 1.75rem;
  clip-path: polygon(100% 50%, 100% 50%, 0 0, 0 100%);
  width: 100vw;
  height: 25vw;
  z-index: 1;
  mix-blend-mode: multiply;
  transition: transform 200ms ease-out;
  transform-origin: 100% 50%;
  transform: translateY(-50%) rotate(var(--beamDegrees, 0));
  pointer-events: none;
}
.show-password [id=beam] {
  background: var(--beamColor);
}

Comments 0

…