sendsecret/app/public/index.html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Passwort sicher übermitteln – Lucas Orth</title>
  <meta name="robots" content="noindex, nofollow">
  <link rel="icon" href="https://lucas-orth.de/wp-content/uploads/2023/06/favicon-scaled.webp">
  <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=Space+Grotesk:wght@500;600;700&family=Manrope:wght@400;500;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/style.css">
</head>
<body>
<div class="page">

  <!-- ── Header ─────────────────────────────────── -->
  <header class="header">
    <nav class="nav container">
      <a href="https://lucas-orth.de" target="_blank" rel="noopener">
        <img
          src="https://lucas-orth.de/wp-content/uploads/2023/06/Lucas-Orth-black-high-res_ergebnis-scaled-e1687249204543.webp"
          alt="Lucas Orth"
          class="logo"
        >
      </a>
      <a href="https://lucas-orth.de/kontakt" target="_blank" rel="noopener" class="btn btn--primary">
        Kontakt
      </a>
    </nav>
  </header>

  <main style="display:contents">

    <!-- ── Hero ───────────────────────────────────── -->
    <section class="hero">
      <div class="container">
        <div class="hero__inner">

          <!-- Form State -->
          <div id="state-form">
            <p class="eyebrow">Sicher &amp; verschlüsselt</p>
            <h1 class="hero-title">
              Passwort sicher<br>
              <span class="accent">übermitteln.</span>
            </h1>
            <p class="lead">
              Geben Sie Ihr Passwort oder Ihre Zugangsdaten ein.
              Der Link wird Ende-zu-Ende-verschlüsselt direkt an
              Lucas Orth gesendet – Sie müssen nichts weiter tun.
            </p>

            <form id="form" class="hero-form" novalidate>
              <div class="field">
                <label for="sender-name" class="label">Ihr Name <span style="color:var(--color-error)">*</span></label>
                <input
                  id="sender-name"
                  type="text"
                  class="input"
                  placeholder="z. B. Max Mustermann"
                  required
                  autocomplete="name"
                  spellcheck="false"
                >
              </div>

              <div class="field">
                <label for="text" class="label">Ihr Passwort / Zugangsdaten <span style="color:var(--color-error)">*</span></label>
                <textarea
                  id="text"
                  class="textarea"
                  placeholder="z. B.&#10;Benutzername: max@beispiel.de&#10;Passwort: mein-passwort-123"
                  rows="6"
                  required
                  autocomplete="off"
                  autocorrect="off"
                  spellcheck="false"
                ></textarea>
              </div>

              <div id="state-error" hidden>
                <div class="alert alert--error" role="alert">
                  <span id="error-msg"></span>
                </div>
              </div>

              <button id="submit" type="submit" class="btn btn--primary">
                <span id="submit-label">Jetzt sicher senden</span>
              </button>

              <p class="hint">Ende-zu-Ende verschlüsselt &nbsp;·&nbsp; Einmalig abrufbar &nbsp;·&nbsp; Kein Speichern</p>
            </form>
          </div>

          <!-- Success State -->
          <div id="state-success" hidden>
            <div class="success-icon" aria-hidden="true">✓</div>
            <p class="eyebrow">Erfolgreich übermittelt</p>
            <h2 class="hero-title">
              Passwort wurde<br>
              <span class="accent">übermittelt.</span>
            </h2>
            <p class="lead">
              Ihr Passwort wurde sicher verschlüsselt und direkt an Lucas Orth
              weitergeleitet. Sie müssen nichts weiter tun.
            </p>
          </div>

        </div>
      </div>
    </section>

    <!-- ── Steps Section ──────────────────────────── -->
    <section class="section-steps">
      <div class="container">
        <div class="section-header">
          <p class="eyebrow">So funktioniert es</p>
          <h2 class="section-title">In drei Schritten übermittelt.</h2>
          <p class="lead">
            Kein Account nötig, keine versteckten Schritte –
            einfach eingeben und absenden.
          </p>
        </div>

        <div class="steps-grid">
          <div class="step-card">
            <span class="step-num">01</span>
            <h3 class="step-title">Text eingeben</h3>
            <p class="step-text">
              Tragen Sie Ihr Passwort oder Ihre Zugangsdaten in das Textfeld ein.
            </p>
          </div>
          <div class="step-card">
            <span class="step-num">02</span>
            <h3 class="step-title">Sicher senden</h3>
            <p class="step-text">
              Mit einem Klick wird der Text verschlüsselt und der Link
              automatisch an Lucas Orth gesendet.
            </p>
          </div>
          <div class="step-card">
            <span class="step-num">03</span>
            <h3 class="step-title">Fertig</h3>
            <p class="step-text">
              Der Link ist einmalig abrufbar und löscht sich nach dem
              ersten Öffnen automatisch.
            </p>
          </div>
        </div>
      </div>
    </section>

  </main>

  <!-- ── Footer ─────────────────────────────────── -->
  <footer class="footer">
    <div class="container">
      <div class="footer__inner">
        <span>© 2026 Lucas Orth – Webdesign &amp; IT-Betreuung</span>
        <div class="footer__links">
          <a href="https://lucas-orth.de/datenschutz" target="_blank" rel="noopener">Datenschutz</a>
          <a href="https://lucas-orth.de/impressum" target="_blank" rel="noopener">Impressum</a>
        </div>
      </div>
    </div>
  </footer>

</div>
<script src="/customer.js"></script>
</body>
</html>