Komponente zum Zurücksetzen des Kennworts

<div class="min-h-screen flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 font-sans">
  <div class="max-w-md w-full rounded-2xl shadow-xl p-8 bg-gradient-to-br from-green-50 to-blue-50 dark:from-gray-800 dark:to-gray-950 border border-green-200 dark:border-gray-700
              transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl
              relative overflow-hidden
              before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-br before:from-green-100 before:to-blue-100 dark:before:from-gray-700 dark:before:to-gray-900 before:opacity-0 before:blur-sm before:transition-opacity before:duration-500
              hover:before:opacity-30">
    
    <div class="absolute inset-0 z-0 opacity-10 dark:opacity-5" style="background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%2338A169" fill-opacity="0.4"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"></div>

    <div class="relative z-10">
      <div class="flex justify-center mb-6">
        <svg class="w-16 h-16 text-green-600 dark:text-green-400 drop-shadow-lg" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
        </svg>
      </div>
      <h2 class="text-3xl font-extrabold text-gray-800 dark:text-gray-100 text-center mb-4 leading-tight drop-shadow-md tracking-wider">
        <span class="text-green-700 dark:text-green-500">Access</span> Recovery
      </h2>
      <p class="text-gray-600 dark:text-gray-300 text-center mb-8 text-lg leading-relaxed">
        Securely restore your account access with advanced encryption. 
      </p>

      <form class="space-y-6">
        <div class="relative group">
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2 skeleton-label">
            Registered Email Address
          </label>
          <div class="relative">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <svg class="h-5 w-5 text-gray-400 dark:text-gray-500 transform transition-transform group-hover:scale-110" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.5a2.5 2.5 0 10-5 0V12"/>
              </svg>
            </div>
            <input type="email" id="email" name="email" autocomplete="email" required
                   class="block w-full pl-10 pr-3 py-3 rounded-xl border border-blue-300 dark:border-gray-600 shadow-inner 
                          bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500
                          focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent
                          hover:border-blue-400 dark:hover:border-gray-500 transition duration-300
                          neumorphic-input">
          </div>
          <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">Enter the email associated with your account.</p>
        </div>

        <div class="relative group">
          <label for="token" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2 skeleton-label">
            Recovery Token (Optional)
          </label>
          <div class="relative">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <svg class="h-5 w-5 text-gray-400 dark:text-gray-500 transform transition-transform group-hover:scale-110" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2v5l-3 3H7a2 2 0 01-2-2V9a2 2 0 012-2h5a2 2 0 012 2z"/>
              </svg>
            </div>
            <input type="text" id="token" name="token" placeholder="e.g., 2FA code or backup key"
                   class="block w-full pl-10 pr-3 py-3 rounded-xl border border-blue-300 dark:border-gray-600 shadow-inner
                          bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500
                          focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent
                          hover:border-blue-400 dark:hover:border-gray-500 transition duration-300
                          neumorphic-input">
          </div>
          <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
            If you have a 2FA code or backup key, enter it here for faster recovery.
          </p>
        </div>

        <button type="submit"
                class="w-full flex justify-center py-3 px-4 border border-transparent rounded-xl shadow-lg text-lg font-semibold
                       text-white bg-gradient-to-r from-green-500 to-blue-600
                       dark:from-green-600 dark:to-blue-700
                       hover:from-green-600 hover:to-blue-700 dark:hover:from-green-700 dark:hover:to-blue-800
                       focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:focus:ring-offset-gray-900
                       transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 active:scale-95
                       group relative overflow-hidden neumorphic-button">
          <span class="absolute inset-0 bg-black opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
          <span class="relative flex items-center justify-center">
            <svg class="-ml-1 mr-3 h-6 w-6 transform rotate-0 group-hover:rotate-12 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.007 12.007 0 002.944 12c.071 1.603.359 3.165.848 4.656.49.983 1.102 1.884 1.848 2.685.746.801 1.63 1.482 2.607 2.006A9.954 9.954 0 0012 22.955c1.196-.067 2.378-.344 3.498-.795.977-.424 1.861-1.105 2.607-1.906.746-.801 1.358-1.702 1.848-2.685.489-1.491.777-3.053.848-4.656a12.007 12.007 0 00-.05-9.056z"/>
            </svg>
            Initiate Recovery
          </span>
        </button>
      </form>

      <div class="mt-8 text-center text-sm">
        <p class="mb-2 text-gray-600 dark:text-gray-300">Having trouble?</p>
        <a href="#" class="font-medium text-green-700 hover:text-green-500 dark:text-green-400 dark:hover:text-green-300
                           transform transition-transform duration-200 hover:scale-[1.03] active:scale-95
                           block py-2 rounded-lg bg-green-50 dark:bg-gray-800 border border-green-200 dark:border-gray-700
                           shadow-sm hover:shadow-md">
          Contact Support for Manual Review
        </a>
      </div>

      <div class="mt-10 pt-6 border-t border-green-200 dark:border-gray-700 text-center">
        <p class="text-xs text-gray-500 dark:text-gray-400">
          Your security is our top priority. All recovery processes are encrypted.
        </p>
        <div class="flex justify-center flex-wrap gap-x-4 gap-y-2 mt-4">
          <span class="text-xs text-gray-400 dark:text-gray-500 flex items-center">
            <svg class="w-4 h-4 mr-1 text-blue-500 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.007 12.007 0 002.944 12c.071 1.603.359 3.165.848 4.656.49.983 1.102 1.884 1.848 2.685.746.801 1.63 1.482 2.607 2.006A9.954 9.954 0 0012 22.955c1.196-.067 2.378-.344 3.498-.795.977-.424 1.861-1.105 2.607-1.906.746-.801 1.358-1.702 1.848-2.685.489-1.491.777-3.053.848-4.656a12.007 12.007 0 00-.05-9.056z"></path></svg>
            Security First
          </span>
          <span class="text-xs text-gray-400 dark:text-gray-500 flex items-center">
            <svg class="w-4 h-4 mr-1 text-green-500 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18a2 2 0 002-2V7a2 2 0 00-2-2H3a2 2 0 00-2 2v12a2 2 0 002 2zM10 5a2 2 0 012-2h4a2 2 0 012 2v2H8V5z"></path></svg>
            Blockchain Integrated
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
/* Base Skeuomorphism styles for neumorphic effect */
.neumorphic-input {
  box-shadow: inset 3px 3px 6px #bfcfe7, inset -3px -3px 6px #ffffff;
}
.dark .neumorphic-input {
  box-shadow: inset 3px 3px 6px #1a202c, inset -3px -3px 6px #4a5568;
}

.neumorphic-button {
  box-shadow: 6px 6px 12px #98d1d1, -6px -6px 12px #ffffff;
}
.dark .neumorphic-button {
  box-shadow: 6px 6px 12px #1e414f, -6px -6px 12px #324e60;
}

/* Add active state for button press effect */
.neumorphic-button:active {
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2),
              inset -2px -2px 5px rgba(255, 255, 255, 0.7);
}
.dark .neumorphic-button:active {
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.4),
              inset -2px -2px 5px rgba(255, 255, 255, 0.1);
}

/* Further styling for visual depth and subtle skeuomorphism */
.skeleton-label {
  text-shadow: 1px 1px 2px rgba(255,255,255,0.6), -1px -1px 2px rgba(0,0,0,0.1);
}
.dark .skeleton-label {
  text-shadow: 1px 1px 2px rgba(0,0,0,0.4), -1px -1px 2px rgba(255,255,255,0.05);
}

/* Subtle text shadows for better readability on light/dark backgrounds */
h2, p {
  text-shadow: 1px 1px 2px rgba(0,0,0,0.05);
}
.dark h2, .dark p {
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
</style>