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

138 TheDoc

संपादक में खोलें अपना कोड प्रकाशित करें क्या आपको एक वेबसाइट चाहिए?

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

अनुशंसित

26 June 2025

AI वेबसाइट बिल्डर | ड्रैग और ड्रॉप | वेबमास्टर

22 June 2025

HTML लॉगिन फॉर्म उदाहरण

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

अनुशंसित

AI वेबसाइट बिल्डर | ड्रैग और ड्रॉप | वेबमास्टर

HTML लॉगिन फॉर्म उदाहरण

जीएसएपी ऑब्जर्वर के साथ एनिमेटेड सतत अनुभाग

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS