encrypt.click

Privacy-first security tools that run primarily in the browser. The site is built with Astro + Svelte, ships localized English/Czech/German UI, and includes downloadable standalone HTML builds for the main tools.

What ships

Developer tools

• UUID & ULID
• Token generator
• Bcrypt hash
• HMAC signer
• RSA keys
• SSH keys
• PGP keys
• JWT debugger
• Base64
• BIP39 mnemonic

Cryptography tools

• AES Words
• Enigma M3
• Caesar cipher
• Vigenere cipher
• Time Capsule

Privacy tools

• Steganography
• Photo Cipher
• Ghost Drop

Other first-class routes

• / homepage with the main UltimateEncrypt flow
• /drop Dead Drop link tool
• /u decrypt / receive flow
• /download download handoff flow
• /security privacy and security page

Current architecture

• Astro 5
• Svelte 5 for interactive tools
• Tailwind CSS v4
• Cloudflare adapter
• Astro i18n with en, cs, de

Important app patterns

• Tool pages are registered in src/lib/tools.ts.
• Every user-facing UI string belongs in src/locales/en.json, src/locales/cs.json, and src/locales/de.json.
• The 5-tool education pilot lives in src/content/tool-education/ and is loaded through src/lib/toolEducation.ts.
• Standalone downloadable HTML tools are generated by generate-standalone.mjs through standalone-integration.mjs.
• Security headers and middleware behavior live in src/middleware.ts and public/_headers.
• The Ghost Drop upload/decrypt subsystem lives under src/lib/ghost/ and src/pages/api/ghost/.

Quick start

yarn install
yarn dev
yarn build
yarn preview

Local dev runs at http://localhost:4321.

Project structure

src/
├── components/
│   ├── home/                  # Homepage sections
│   ├── tool-education/        # Shared education UI for pilot tool pages
│   └── tools/                 # Interactive tool components
├── content/
│   └── tool-education/        # Per-tool educational content (en/cs/de)
├── layouts/
│   └── Layout.astro
├── lib/
│   ├── crypto.ts
│   ├── ghost/                 # Ghost Drop crypto/stego helpers
│   ├── i18n.ts
│   ├── languages.ts
│   ├── toolEducation.ts
│   └── tools.ts
├── locales/
│   ├── en.json
│   ├── cs.json
│   └── de.json
├── pages/
│   ├── api/
│   ├── index.astro
│   ├── drop.astro
│   ├── download.astro
│   ├── security.astro
│   ├── u.astro
│   └── tools/
└── styles/
    └── global.css

Adding a new tool

At minimum, a new site tool usually needs:

1. A Svelte component in src/components/tools/
2. An Astro page in src/pages/tools/
3. A registry entry in src/lib/tools.ts
4. Locale keys in all 3 locale files

If the tool should also have:

• a standalone downloadable HTML version: update generate-standalone.mjs
• a richer explainer page like the 5-tool pilot: add content in src/content/tool-education/{en,cs,de}/ and wire it through src/lib/toolEducation.ts

Minimal page pattern

---
import Layout from '../../layouts/Layout.astro';
import MyToolView from '../../components/tools/MyTool.svelte';
import DownloadStandalone from '../../components/DownloadStandalone.astro';
import { getTranslations, t, type Locale } from '../../lib/i18n';

const locale = (Astro.currentLocale ?? 'en') as Locale;
const dict = getTranslations(locale);
---

<Layout
  title={t(dict, 'tools.myTool.meta.title')}
  description={t(dict, 'tools.myTool.meta.description')}
>
  <div class="max-w-6xl mx-auto px-5 py-12 md:py-20">
    <div class="tool-hero">
      <div class="tool-hero__copy">
        <h1 class="tool-hero__title">
          {t(dict, 'tools.myTool.h1')}
          <span class="text-emerald-500">{t(dict, 'tools.myTool.h1Highlight')}</span>
        </h1>
        <p class="tool-hero__subtitle">{t(dict, 'tools.myTool.subtitle')}</p>
      </div>
    </div>

    <div class="card p-8">
      <MyToolView client:load locale={locale} />
    </div>

    <DownloadStandalone slug="my-tool" locale={locale} />
  </div>
</Layout>

Registry entry

{ slug: 'my-tool', i18nPrefix: 'tools.myTool', navLabelKey: 'nav.tool.myTool', category: 'developer' }

Valid categories:

• developer
• cryptography
• privacy

Education content pilot

These tool pages already use the richer “Understand it” layer:

• base64
• bcrypt
• jwt
• time-capsule
• enigma

The data format is defined in src/content.config.ts. Content lives per locale, per tool, for example:

• src/content/tool-education/en/base64.json
• src/content/tool-education/cs/base64.json
• src/content/tool-education/de/base64.json

Localization

• en.json is the source of truth.
• Every key must exist in cs.json and de.json.
• Do not hardcode English in components or pages.
• Long educational copy for the pilot tools belongs in src/content/tool-education/, not in the flat locale dictionaries.

Routing:

• / = English
• /cs/ = Czech
• /de/ = German

Standalone HTML exports

yarn build also generates standalone HTML files in dist/standalone/.

These are not inferred automatically from src/lib/tools.ts. If you add or rename a standalone-capable tool, update:

• generate-standalone.mjs
• any matching download button usage via src/components/DownloadStandalone.astro

Security notes

• Core crypto runs in the browser.
• Some flows intentionally use server routes for things like URL shortening, Ghost Drop relays, or the drand proxy.
• Read /security for the user-facing privacy summary.

Deployment

Optimized for Cloudflare Pages / Cloudflare adapter.

Relevant files:

• astro.config.mjs
• wrangler.toml
• public/_headers

Contributing

See CONTRIBUTING.md.

License

MIT