एनिमेटेड बॉर्डर और पासवर्ड रीसेट के साथ आधुनिक लॉगिन पैनल TheDoc से

1120 TheDoc

संपादक में खोलें Video अपना कोड प्रकाशित करें

एनिमेटेड बॉर्डर और पासवर्ड रीसेट के साथ आधुनिक लॉगिन पैनल TheDoc से

अनुशंसित

18 October 2025

होवर प्रभाव के साथ HTML बटन (WEBLEB)

21 July 2024

एनिमेटेड साइन इन फॉर्म

21 January 2026

सीएसएस एट्रिब्यूशन फ़ूटर: फिक्स्ड, सेंटर्ड, स्टाइलिश

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

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

अनुशंसित

होवर प्रभाव के साथ HTML बटन (WEBLEB)

एनिमेटेड साइन इन फॉर्म

सीएसएस एट्रिब्यूशन फ़ूटर: फिक्स्ड, सेंटर्ड, स्टाइलिश

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS