public/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ION606 — Share Portal</title>
    <meta name="description" content="ION606 self-hosted Share Portal — quick access to PrivateBin (notes) and LUFI (file drops).">
    <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=Inter:wght@400;600;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
    <header class="site-header">
      <div class="container header-inner">
        <div class="brand-row">
          <div class="logo">🔐</div>
          <div>
            <h1 class="brand">ION606's Share Portal</h1>
            <p class="tagline">Self‑hosted privacy tools: encrypted notes & secure file drops</p>
          </div>
        </div>
      </div>
    </header>

    <main class="container">
      <section class="hero card">
        <h2 class="hero-title">Private notes • Encrypted file drops</h2>
        <p class="hero-lead">Quick links to your self‑hosted services. Nothing stored here — just shortcuts to PrivateBin (end‑to‑end encrypted notes) and LUFI (client‑side encrypted file sharing).</p>

        <nav class="actions">
          <a class="btn" data-link="note" href="#" target="_blank" rel="noopener">Open PrivateBin (notes)</a>
          <a class="btn" data-link="drop" href="#" target="_blank" rel="noopener">Open LUFI (file drop)</a>
        </nav>

        <p class="hint">Bookmark this page at <a id="home-domain" href="#" target="_blank" rel="noopener"></a></p>
      </section>

      <section class="cards-grid">
        <article class="card feature">
          <h3>Why PrivateBin?</h3>
          <p>End‑to‑end encrypted pastes. Paste content is encrypted in your browser before upload — the server never sees plain text.</p>
        </article>

        <article class="card feature">
          <h3>Why LUFI?</h3>
          <p>Client‑side encrypted file sharing with configurable expiry. Share large files securely without third‑party hosting.</p>
        </article>

		<article class="card feature">
		  <h3>Wanna self-host?</h3>
		  <p>You can view the source code/instructions at <a data-link="github" href="https://github.com/ION606/tempfiles" target="_blank"></a></p>
		</article>
      </section>
    </main>

    <footer class="site-footer">
      <div class="container footer-inner">
        <p><span id="year"></span> · served by caddy · ION606</p>
      </div>
    </footer>

    <script type="module" src="./app.js"></script>
  </body>
</html>