Modern Login Panel with Animated Border and Password Reset from TheDoc

Open In Editor Video Publish Your Code

<!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;
}

JS

// 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 */

Modern Login Panel with Animated Border and Password Reset from TheDoc

Recommended

Modern Design Blog HTML Template

Login from TheDOC

Loader with CSS

HTML

CSS

JS

Recommended

Modern Design Blog HTML Template

Login from TheDOC

Loader with CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS