mockups/forgot_password.html

Rama main · réplica de lectura del repositorio original.

<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Reset your password — Cloudzilla</title>
<link rel="stylesheet" href="/assets/tailwind.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&family=Geist:wght@400;500;600&display=swap" rel="stylesheet" />
</head>
<body class="min-h-screen flex flex-col antialiased font-sans">
<a href="#main-content" class="skip-link">Skip to main content</a>

<div id="cz-header" data-anon></div>

<main id="main-content" tabindex="-1" class="max-w-[1400px] mx-auto px-6 pt-6 pb-20 flex-1 w-full">
  <div class="max-w-md mx-auto mt-12 rounded-md border border-border bg-card p-6">
    <div id="request">
      <div class="text-center mb-6">
      <a href="index.html" class="inline-flex" aria-label="Cloudzilla home"><svg width="36" height="36" viewBox="0 0 64 64" fill="currentColor" aria-hidden="true" focusable="false"><circle cx="22" cy="36" r="9"></circle><circle cx="32" cy="28" r="11"></circle><circle cx="44" cy="36" r="9"></circle><rect x="22" y="36" width="22" height="9" rx="4.5"></rect></svg></a>
      <p class="mt-4 font-mono text-[11px] text-muted-foreground uppercase tracking-wider">Cloudzilla</p>
      <h1 class="mt-1 text-xl font-semibold tracking-tight">Reset your password</h1>
      <p class="mt-2 text-[13px] text-muted-foreground">Enter your account's email address and we'll send you a link to choose a new password.</p>
    </div>
      <form id="form" class="space-y-4">
        <div class="space-y-1.5"><label for="forgot-email" class="block text-sm font-medium">Email</label><input type="email" id="forgot-email" name="email" required autofocus autocomplete="email" class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50" /></div>
        <button type="submit" class="inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition-colors disabled:opacity-50 disabled:pointer-events-none bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 text-sm w-full">Send reset link</button>
      </form>
    </div>
    <div id="sent" hidden>
      <div class="text-center mb-6">
      <a href="index.html" class="inline-flex" aria-label="Cloudzilla home"><svg width="36" height="36" viewBox="0 0 64 64" fill="currentColor" aria-hidden="true" focusable="false"><circle cx="22" cy="36" r="9"></circle><circle cx="32" cy="28" r="11"></circle><circle cx="44" cy="36" r="9"></circle><rect x="22" y="36" width="22" height="9" rx="4.5"></rect></svg></a>
      <p class="mt-4 font-mono text-[11px] text-muted-foreground uppercase tracking-wider">Cloudzilla</p>
      <h1 class="mt-1 text-xl font-semibold tracking-tight">Check your inbox</h1>
      <p class="mt-2 text-[13px] text-muted-foreground">If an account uses that address, we've emailed it a link to reset its password. If nothing arrives, check your spam folder or try again in a few minutes.</p>
    </div>
      <a href="reset_password.html" class="inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition-colors border border-input bg-transparent hover:bg-accent hover:text-accent-foreground h-9 px-4 text-sm w-full">Open the reset link</a>
    </div>
    <p class="mt-5 text-center text-[12px] text-muted-foreground"><a href="login.html" class="text-foreground hover:underline">Back to sign in</a></p>
  </div>
</main>

<div id="cz-footer"></div>
<script>
(function () {
  document.getElementById('form').addEventListener('submit', function (e) {
    e.preventDefault();
    document.getElementById('request').hidden = true;
    document.getElementById('sent').hidden = false;
  });
})();
</script>
<script src="shell.js"></script>
</body>
</html>