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

996 TheDoc

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

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

अनुशंसित

2 September 2025

YouTube एम्बेड और ग्लिच प्रभाव के साथ HTML टीवी स्क्रीन

12 December 2025

CSS और Font Awesome के साथ HTML लॉगिन फॉर्म

27 August 2024

लॉगिन फॉर्म

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

अनुशंसित

YouTube एम्बेड और ग्लिच प्रभाव के साथ HTML टीवी स्क्रीन

CSS और Font Awesome के साथ HTML लॉगिन फॉर्म

लॉगिन फॉर्म

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS