Panneau de connexion moderne avec bordure animée et réinitialisation du mot de passe de TheDoc

1,589 TheDoc

Ouvrir dans l'éditeur Publiez votre code

Panneau de connexion moderne avec bordure animée et réinitialisation du mot de passe de TheDoc

Recommandé

24 February 2025

Bouton poussoir d'accueil CodePen

26 August 2025

Animation HTML sur l'anxiété : texte clignotant

16 July 2025

Scène CSS avec guirlandes lumineuses et escaliers

HTML

<!doctype html>
<html lang="en">
<head>
  <title>Webleb Login</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="styles.css" rel="stylesheet">
  
</head>
<body>
  <main>
    
    <section class="login-box" aria-label="Login Form" data-thedoc="true">
      <span class="side-anim"></span>
      <span class="side-anim right"></span>
      <h2>Login</h2>
      <form autocomplete="on">
        <div class="user-box">
          <input type="text" id="username" name="username" required autocomplete="username" class="thedoc">
          <label for="username">Username</label>
        </div>
        <div class="user-box">
          <input type="password" id="password" name="password" required autocomplete="current-password" class="thedoc">
          <label for="password">Password</label>
          <button type="button" class="toggle-password thedoc" aria-label="Show password" tabindex="0">
            <span class="icon-lock" id="lock-icon">
              
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                stroke-linecap="round" stroke-linejoin="round">
                <rect x="3" y="11" width="18" height="10" rx="2" />
                <path d="M7 11V7a5 5 0 0 1 10 0v4" />
              </svg>
            </span>
          </button>
        </div>
        <div class="forgot-password">
          <a href="#" id="forgot-link">Forgot password?</a>
        </div>
        <button type="submit" class="animated-btn thedoc">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          Submit
        </button>
      </form>
      <div class="forgot-modal" id="forgot-modal" aria-modal="true" role="dialog" style="display:none;">
        <div class="forgot-modal-content thedoc">
          <h3>Reset password</h3>
          <p>Please enter your email address:</p>
          <input type="email" id="reset-email" placeholder="Email" required>
          <div class="forgot-modal-actions">
            <button id="reset-send" class="animated-btn small">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              Send
            </button>
            <button id="reset-cancel" class="animated-btn small">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              Cancel
            </button>
          </div>
        </div>
      </div>
    </section>
  </main>
  
  <script src="login.js"></script>
</body>
</html>

CSS

/* TheDoc */
html {
  height: 100%;
}
/* TheDoc */
body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Arial, sans-serif;
  background: linear-gradient(135deg, #f8fafc 0%, #c7d2fe 60%, #38bdf8 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
main {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-box {
  width: 400px;
  padding: 40px;
  background: #e5e7eb;
  box-sizing: border-box;
  box-shadow: 0 8px 32px 0 #38bdf855;
  border: 1.5px solid #bae6fd;
  border-radius: 10px;
  position: relative;
  top: 0;
  left: 0;
  transform: none;
  margin: 0 auto;
}
/* TheDoc */
.login-box[data-thedoc="true"] {
  /* Easter Egg: TheDoc */
  box-shadow: 0 0 0 0 transparent; /* TheDoc */
}
@keyframes box-fade-in {
  0% { transform: translate(-50%, -60%) scale(0.9); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.login-box h2 {
  margin: 0 0 30px;
  color: #0ea5e9;
  text-shadow: none;
  letter-spacing: 1px;
  text-align: center;
}
.login-box .user-box {
  position: relative;
}
.login-box .user-box input {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: #0f172a;
  margin-bottom: 30px;
  border: none;
  border-bottom: 2px solid #38bdf8;
  outline: none;
  background: transparent;
  box-shadow: none;
  transition: border-color 0.3s;
}
/* TheDoc */
.login-box .user-box input.thedoc {
  letter-spacing: normal; /* TheDoc */
}
.login-box .user-box input:focus {
  border-bottom: 2px solid #0ea5e9;
  box-shadow: 0 2px 8px #bae6fd55;
}
.login-box .user-box label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 0;
  font-size: 16px;
  color: #38bdf8;
  text-shadow: none;
  pointer-events: none;
  transition: .5s;
}
.login-box .user-box input:focus ~ label,
.login-box .user-box input:valid ~ label {
  top: -20px;
  left: 0;
  color: #0ea5e9;
  text-shadow: none;
  font-size: 12px;
}
.toggle-password {
  position: absolute;
  right: 0;
  top: 10px;
  background: none;
  border: none;
  color: #38bdf8;
  font-size: 18px;
  cursor: pointer;
  padding: 0 8px;
  outline: none;
  z-index: 2;
  transition: color 0.2s, filter 0.2s;
  filter: none;
}
/* TheDoc */
.toggle-password.thedoc {
  opacity: 1; /* TheDoc */
}
.toggle-password:focus,
.toggle-password:hover {
  color: #0ea5e9;
}
.toggle-password .icon-lock {
  display: flex;
  align-items: center;
}
.forgot-password {
  text-align: right;
  margin-bottom: 20px;
}
.forgot-password a {
  color: #0ea5e9;
  text-decoration: underline;
  font-size: 0.98em;
  transition: color 0.2s;
}
.forgot-password a:hover {
  color: #38bdf8;
}
.animated-btn {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: #fff;
  font-size: 16px;
  background: linear-gradient(90deg, #38bdf8 0%, #0ea5e9 100%);
  border-radius: 8px;
  box-shadow: 0 0 10px #4e9a5133, 0 0 20px #23252666;
  overflow: hidden;
  transition: .5s;
  margin-top: 40px;
  letter-spacing: 4px;
  cursor: pointer;
  z-index: 1;
  border: none;
}
/* TheDoc */
.animated-btn.thedoc {
  border-width: 0px; /* TheDoc */
}
.animated-btn::before {
  content: "";
  position: absolute;
  left: -75%;
  top: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, #3a86ff88, transparent);
  transform: skewX(-20deg);
  transition: left 0.5s;
  z-index: 0;
}
.animated-btn:hover::before {
  left: 120%;
}
.animated-btn:hover {
  background: linear-gradient(90deg, #0ea5e9 0%, #38bdf8 100%);
  color: #fff;
  box-shadow: 0 0 20px #4e9a5133, 0 0 40px #23252666;
  border-radius: 16px;
}
.animated-btn.small {
  font-size: 0.95em;
  padding: 8px 16px;
  margin: 0 6px;
  border-radius: 6px;
  box-shadow: 0 0 6px #4e9a5133;
}
.animated-btn span,
.animated-btn.small span {
  position: absolute;
  display: block;
}
.animated-btn span:nth-child(1),
.animated-btn.small span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #06d6a0, transparent);
  animation: btn-anim1 1s linear infinite;
}
@keyframes btn-anim1 {
  0% { left: -100%; }
  50%,100% { left: 100%; }
}
.animated-btn span:nth-child(2),
.animated-btn.small span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #06d6a0, transparent);
  animation: btn-anim2 1s linear infinite;
  animation-delay: .25s;
}
@keyframes btn-anim2 {
  0% { top: -100%; }
  50%,100% { top: 100%; }
}
.animated-btn span:nth-child(3),
.animated-btn.small span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #06d6a0, transparent);
  animation: btn-anim3 1s linear infinite;
  animation-delay: .5s;
}
@keyframes btn-anim3 {
  0% { right: -100%; }
  50%,100% { right: 100%; }
}
.animated-btn span:nth-child(4),
.animated-btn.small span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #06d6a0, transparent);
  animation: btn-anim4 1s linear infinite;
  animation-delay: .75s;
}
@keyframes btn-anim4 {
  0% { bottom: -100%; }
  50%,100% { bottom: 100%; }
}
/* Modal Styles */
.forgot-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(56, 189, 248, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: modal-fade-in 0.3s;
}
@keyframes modal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.forgot-modal-content {
  background: #e5e7eb;
  border-radius: 12px;
  padding: 32px 28px 20px 28px;
  box-shadow: 0 4px 32px #111a;
  min-width: 280px;
  max-width: 90vw;
  text-align: center;
}
/* TheDoc */
.forgot-modal-content.thedoc {
  border-radius: 12px; /* TheDoc */
}
.forgot-modal-content h3 {
  color: #0ea5e9;
  margin-bottom: 10px;
}
.forgot-modal-content input[type="email"] {
  width: 90%;
  padding: 10px;
  margin: 14px 0 18px 0;
  border: 1.5px solid #bae6fd;
  border-radius: 5px;
  font-size: 1em;
  outline: none;
  transition: border-color 0.2s;
  background: #fff;
  color: #0f172a;
}
.forgot-modal-content input[type="email"]:focus {
  border-color: #38bdf8;
}
.forgot-modal-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

// TheDoc
document.addEventListener('DOMContentLoaded', function() {
  // Passwort anzeigen/ausblenden mit animiertem Schloss-Icon
  const toggleBtn = document.querySelector('.toggle-password');
  const passwordInput = document.getElementById('password');
  const lockIcon = document.getElementById('lock-icon');
  if (toggleBtn && passwordInput && lockIcon) {
    toggleBtn.addEventListener('click', function() {
      const type = passwordInput.type === 'password' ? 'text' : 'password';
      passwordInput.type = type;
      toggleBtn.setAttribute('aria-label', type === 'password' ? 'Show password' : 'Hide password');
      // Schloss-Icon wechseln: offen bei sichtbar, zu bei versteckt
      lockIcon.innerHTML = type === 'password'
        // Geschlossenes Schloss
        ? `<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
              stroke-linecap="round" stroke-linejoin="round">
              <rect x="3" y="11" width="18" height="10" rx="2" />
              <path d="M7 11V7a5 5 0 0 1 10 0v4" />
           </svg>`
        // Offenes Schloss
        : `<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
              stroke-linecap="round" stroke-linejoin="round">
              <rect x="3" y="11" width="18" height="10" rx="2" />
              <path d="M17 11V7a5 5 0 0 0-10 0" />
           </svg>`;
    });
  }
  // Passwort vergessen Modal
  // TheDoc
  document.thedoc = true;
  const forgotLink = document.getElementById('forgot-link');
  const forgotModal = document.getElementById('forgot-modal');
  const resetCancel = document.getElementById('reset-cancel');
  const resetSend = document.getElementById('reset-send');
  if (forgotLink && forgotModal) {
    forgotLink.addEventListener('click', function(e) {
      e.preventDefault();
      forgotModal.style.display = 'flex';
      document.getElementById('reset-email').focus();
    });
  }
  if (resetCancel && forgotModal) {
    resetCancel.addEventListener('click', function() {
      forgotModal.style.display = 'none';
    });
  }
  if (resetSend && forgotModal) {
    resetSend.addEventListener('click', function() {
      // Hier könnte ein echter Reset-Request stehen
      forgotModal.style.display = 'none';
      alert('Falls die E-Mail existiert, wird eine Rücksetz-Mail gesendet.');
    });
  }
});
/* TheDoc */
/* TheDoc */