refactor: use pipe

Dockerfile

@@ -0,0 +1,22 @@
+FROM ghcr.io/gleam-lang/gleam:v1.14.0-erlang-alpine
+
+RUN apk add --no-cache elixir git libstdc++ openssl
+
+WORKDIR /app
+
+COPY gleam.toml manifest.toml ./
+COPY src/ ./src/
+
+RUN gleam deps download && \
+    gleam build --target erlang && \
+    adduser -D -H spasteg && \
+    chown -R spasteg:spasteg /app
+
+EXPOSE 3000
+
+USER spasteg
+
+HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
+    CMD wget --no-verbose --tries=1 --spider http://localhost:3000/ || exit 1
+
+ENTRYPOINT ["gleam", "run", "--target", "erlang", "--", "--no-halt"]

README.md

@@ -1,6 +1,8 @@
 # spasteg
 
-A secure, self-hostable "burn after reading" paste service with ephemeral storage written in [Gleam](https://gleam.run).
+A secure self-hostable burn-after-reading paste service with ephemeral storage written in [Gleam](https://gleam.run).
+
+Have a glimpse of the interface, check out [screenshots](screenshots/)!
 
 ## Features
 
@@ -11,6 +13,16 @@ A secure, self-hostable "burn after reading" paste service with ephemeral storag
 - Fast and reliable
 - Written in Gleam (type-safe)
 
+## Architecture
+
+| Component    | Description                                                                      |
+| ------------ | -------------------------------------------------------------------------------- |
+| Backend/Core | Gleam (type-safe language built upon the BEAM)                                   |
+| Web          | Wisp framework + Mist HTTP server                                                |
+| Frontend     | Lustre for HTML rendering                                                        |
+| Storage      | In-memory only (no persistence)                                                  |
+| Security     | AES-256-GCM client-side encryption, CSRF tokens, rate limiting, security headers |
+
 ## Configuration
 
 ### SECRET_KEY_BASE (Required for Production)
@@ -39,7 +51,9 @@ For development, you can use:
 SECRET_KEY_BASE=dev gleam run
 ```
 
-## Quick Start
+## How to run
+
+### Development
 
 ```bash
 # Clone and build
@@ -48,39 +62,38 @@ cd spasteg
 gleam run
 ```
 
-The server starts on `http://localhost:3000`.
+The server starts on <http://localhost:3000>.
+
+Note: you can run tests with `gleam test`.
+
+### Production
+
+The production environment is designed to run via Docker.
+
+You can build the Docker image with:
+
+```bash
+docker build -t spasteg .
+```
+
+Then run the container with:
+
+```bash
+docker run -d --name pasteg -p <your_port>:3000 -e SECRET_KEY_BASE=$(openssl rand -base64 48) spasteg
+```
+
+The key is generated at startup here, and the container exposes port 3000 so feel free to use the port you want. It also runs as a non-root user with a health check configured.
 
 ## Usage
 
-1. Visit `http://localhost:3000`
+1. Visit <http://localhost:3000>
 2. Enter your text in the form
 3. Click "Create Paste"
 4. Share the generated URL
 5. The paste auto-destructs after first access
 
-Note: the creator cannot see their post with the copied link (except in private browsing) - it would be burned immediately.
-
-## Architecture
-
-- **Gleam**: Type-safe language built upon the BEAM
-- **Web**: Wisp framework + Mist HTTP server
-- **Frontend**: Lustre for HTML rendering
-- **Storage**: In-memory only (no persistence)
-- **Security**: AES-256-GCM client-side encryption, CSRF tokens, rate limiting, security headers
-
-## Security Notes
-
-- Pastes are client-side encrypted (AES-256-GCM) before being sent to server
-- Server never sees the decryption key (stored in URL fragment after `#`)
-- Data is stored **encrypted** in server memory only
-- Data is **never written to disk**
-- All data is lost on server restart
-- CSRF protection via double-submit cookie pattern
-- Rate limiting: 10 requests per minute per IP
-- Security headers: CSP, X-Frame-Options, X-Content-Type-Options, Referrer-Policy
-- 10MB maximum paste size limit
-- Intended for ephemeral sharing only — do not store sensitive data
-
 ## License
 
-This project is licensed under the GNU General Public License v3.0 or later (GPLv3+). See the [LICENSE](LICENSE) file for details.
+This project is licensed under the GNU General Public License v3.0 or later (GPLv3+).
+
+See the [LICENSE](LICENSE) file for details.

gleam.toml

@@ -1,9 +1,9 @@
 name = "spasteg"
 version = "1.0.0"
 
-description = "A secure, self-hostable burn-after-reading paste service written in Gleam"
+description = "A secure self-hostable burn-after-reading paste service written in Gleam"
 licences = ["GPL-3.0"]
-repository = { type = "github", user = "Kharec", repo = "spasteg", host = "https://git.kharec.info" }
+repository = { type = "gitea", user = "Kharec", repo = "spasteg", host = "https://git.kharec.info" }
 
 [dependencies]
 gleam_stdlib = ">= 0.44.0 and < 2.0.0"

src/handlers.gleam

@@ -10,14 +10,9 @@ import storage
 import wisp
 
 fn get_client_ip(request: wisp.Request) -> String {
-  case list.key_find(request.headers, "x-forwarded-for") {
-    Ok(ip) -> ip
-    Error(_) ->
-      case list.key_find(request.headers, "x-real-ip") {
-        Ok(ip) -> ip
-        Error(_) -> "unknown"
-      }
-  }
+  list.key_find(request.headers, "x-forwarded-for")
+  |> result.try_recover(fn(_) { list.key_find(request.headers, "x-real-ip") })
+  |> result.unwrap("unknown")
 }
 
 pub fn handle(
@@ -25,12 +20,12 @@ pub fn handle(
   storage: process.Subject(storage.StorageMsg),
   _secret_key_base: String,
 ) -> wisp.Response {
-  let response = case wisp.path_segments(request) {
+  case wisp.path_segments(request) {
     [] -> handle_home(request, storage)
     ["paste", key_param] -> handle_paste(request, storage, key_param)
     _ -> wisp.not_found()
   }
-  add_security_headers(response)
+  |> add_security_headers
 }
 
 fn add_security_headers(response: wisp.Response) -> wisp.Response {
@@ -57,21 +52,67 @@ fn handle_home(
     }
     http.Post -> {
       use form <- wisp.require_form(request)
+
+      let result = {
+        use _ <- result.try(verify_csrf(request, form))
+        use _ <- result.try(check_rate_limit(storage, get_client_ip(request)))
+        use key <- result.try(create_paste(storage, form))
+        Ok(key)
+      }
+
+      case result {
+        Ok(paste_key) -> {
+          wisp.ok()
+          |> wisp.html_body(html.created(paste_key))
+        }
+        Error(response) -> response
+      }
+    }
+    _ -> wisp.method_not_allowed([http.Get, http.Post])
+  }
+}
+
+fn verify_csrf(
+  request: wisp.Request,
+  form: wisp.FormData,
+) -> Result(Nil, wisp.Response) {
   let csrf_cookie = wisp.get_cookie(request, "csrf_token", wisp.Signed)
   let csrf_form = list.key_find(form.values, "csrf_token")
+
   case csrf_cookie, csrf_form {
-        Ok(cookie_token), Ok(form_token) if cookie_token == form_token -> {
-          let ip = get_client_ip(request)
+    Ok(cookie_token), Ok(form_token) if cookie_token == form_token -> Ok(Nil)
+    _, _ -> Error(wisp.bad_request("Invalid CSRF token"))
+  }
+}
+
+fn check_rate_limit(
+  storage: process.Subject(storage.StorageMsg),
+  ip: String,
+) -> Result(Nil, wisp.Response) {
   let rate_reply = process.new_subject()
   process.send(storage, storage.CheckRateLimit(ip, rate_reply))
+
   case process.receive(rate_reply, 1000) {
-            Ok(True) -> {
+    Ok(True) -> Ok(Nil)
+    _ ->
+      Error(
+        wisp.response(429)
+        |> wisp.html_body("Rate limit exceeded"),
+      )
+  }
+}
+
+fn create_paste(
+  storage: process.Subject(storage.StorageMsg),
+  form: wisp.FormData,
+) -> Result(String, wisp.Response) {
   let encrypted_content =
     list.key_find(form.values, "encrypted_content")
     |> result.unwrap("")
+
   case string.length(encrypted_content) {
-                0 -> wisp.bad_request("Missing content")
-                n if n > 10_000_000 -> wisp.bad_request("Content too large")
+    0 -> Error(wisp.bad_request("Missing content"))
+    n if n > 10_000_000 -> Error(wisp.bad_request("Content too large"))
     _ -> {
       let new_key = key.generate()
       let paste_reply = process.new_subject()
@@ -79,30 +120,17 @@ fn handle_home(
         storage,
         storage.CreatePaste(new_key, encrypted_content, paste_reply),
       )
+
       case process.receive(paste_reply, 1000) {
-                    Ok(True) -> {
-                      wisp.ok()
-                      |> wisp.html_body(html.created(new_key))
-                    }
-                    _ -> {
+        Ok(True) -> Ok(new_key)
+        _ ->
+          Error(
             wisp.internal_server_error()
-                      |> wisp.html_body("Failed to create paste")
+            |> wisp.html_body("Failed to create paste"),
+          )
       }
     }
   }
-              }
-            }
-            _ -> {
-              wisp.response(429)
-              |> wisp.html_body("Rate limit exceeded")
-            }
-          }
-        }
-        _, _ -> wisp.bad_request("Invalid CSRF token")
-      }
-    }
-    _ -> wisp.method_not_allowed([http.Get, http.Post])
-  }
 }
 
 fn handle_paste(

src/html.gleam

@@ -55,8 +55,8 @@ pub fn created(key: String) -> String {
         text("The server never stores or sees the decryption key."),
       ]),
       html.div([attribute.class("notice")], [
-        html.strong([], [text("Burn after reading")]),
-        text(" — This paste will be deleted after the first view"),
+        html.strong([], [text("Beware")]),
+        text(" — This paste will be burned after the first view!"),
       ]),
       html.div(
         [attribute.attribute("data-paste-id", key), attribute.class("hidden")],
@@ -100,7 +100,7 @@ pub fn not_found() -> String {
       layout.card([
         html.h2([], [text("Paste not found")]),
         html.p([], [
-          text("This paste may have already been viewed and deleted."),
+          text("This content has already been burned 🔥"),
         ]),
         html.a([attribute.href("/"), attribute.class("btn-primary")], [
           text("Create New Paste"),
@@ -112,47 +112,45 @@ pub fn not_found() -> String {
 
 fn decrypt_js(encrypted_content: String) -> String {
   "
-(async function() {
+(async () => {
   const encryptedContent = '" <> escape_js_string(encrypted_content) <> "';
-  const hash = window.location.hash.slice(1);
-  const loadingEl = document.getElementById('loading');
-  const errorEl = document.getElementById('error');
-  const contentEl = document.getElementById('content-display');
+  const hash = location.hash.slice(1);
+  const els = {
+    loading: document.getElementById('loading'),
+    error: document.getElementById('error'),
+    content: document.getElementById('content-display')
+  };
+
+  if (!els.loading || !els.error || !els.content) {
+    console.error('Required DOM elements not found');
+    return;
+  }
 
   if (!hash) {
-    loadingEl.classList.add('hidden');
-    errorEl.classList.remove('hidden');
+    els.loading.classList.add('hidden');
+    els.error.classList.remove('hidden');
     return;
   }
 
   try {
-    const keyBase64 = hash.replace(/-/g, '+').replace(/_/g, '/');
+    let keyBase64 = hash.replace(/-/g, '+').replace(/_/g, '/');
+    while (keyBase64.length % 4) keyBase64 += '=';
+
     const encryptedBytes = Uint8Array.from(atob(encryptedContent), c => c.charCodeAt(0));
     const keyBytes = Uint8Array.from(atob(keyBase64), c => c.charCodeAt(0));
     const iv = encryptedBytes.slice(0, 12);
-    const ciphertext = encryptedBytes.slice(12);
-    const key = await crypto.subtle.importKey(
-      'raw',
-      keyBytes,
-      { name: 'AES-GCM' },
-      false,
-      ['decrypt']
-    );
-    const decrypted = await crypto.subtle.decrypt(
-      { name: 'AES-GCM', iv: iv },
-      key,
-      ciphertext
-    );
-    const decoder = new TextDecoder();
-    const plaintext = decoder.decode(decrypted);
-    contentEl.textContent = plaintext;
-    loadingEl.classList.add('hidden');
-    errorEl.classList.add('hidden');
-    contentEl.classList.remove('hidden');
+
+    const key = await crypto.subtle.importKey('raw', keyBytes, { name: 'AES-GCM' }, false, ['decrypt']);
+    const decrypted = await crypto.subtle.decrypt({ name: 'AES-GCM', iv }, key, encryptedBytes.slice(12));
+
+    els.content.textContent = new TextDecoder().decode(decrypted);
+    els.loading.classList.add('hidden');
+    els.error.classList.add('hidden');
+    els.content.classList.remove('hidden');
   } catch (e) {
     console.error('Decryption failed:', e);
-    loadingEl.classList.add('hidden');
-    errorEl.classList.remove('hidden');
+    els.loading.classList.add('hidden');
+    els.error.classList.remove('hidden');
   }
 })();
 "
@@ -165,80 +163,97 @@ fn escape_js_string(s: String) -> String {
   |> string.replace("\"", "\\\"")
   |> string.replace("\n", "\\n")
   |> string.replace("\r", "\\r")
+  |> string.replace("<", "\\u003c")
+  |> string.replace(">", "\\u003e")
+  |> string.replace("&", "\\u0026")
 }
 
 fn crypto_js() -> String {
   "
 async function encryptContent(content) {
+  try {
     const encoder = new TextEncoder();
     const data = encoder.encode(content);
-  const key = await crypto.subtle.generateKey(
-    { name: 'AES-GCM', length: 256 },
-    true,
-    ['encrypt', 'decrypt']
-  );
+    const key = await crypto.subtle.generateKey({ name: 'AES-GCM', length: 256 }, true, ['encrypt', 'decrypt']);
     const iv = crypto.getRandomValues(new Uint8Array(12));
-  const encrypted = await crypto.subtle.encrypt(
-    { name: 'AES-GCM', iv: iv },
-    key,
-    data
-  );
+    const encrypted = await crypto.subtle.encrypt({ name: 'AES-GCM', iv }, key, data);
     const keyData = await crypto.subtle.exportKey('raw', key);
-  const keyBytes = new Uint8Array(keyData);
-  const combined = new Uint8Array(iv.length + encrypted.byteLength);
-  combined.set(iv);
-  combined.set(new Uint8Array(encrypted), iv.length);
-  const encryptedBase64 = btoa(String.fromCharCode(...combined));
-  const keyBase64 = btoa(String.fromCharCode(...keyBytes));
-  return { encrypted: encryptedBase64, key: keyBase64 };
-}
-
-async function base64ToUrlSafeBase64(base64) {
-  let result = base64.split('+').join('-');
-  result = result.split('/').join('_');
-  while (result.endsWith('=')) {
-    result = result.slice(0, -1);
+    return {
+      encrypted: btoa(String.fromCharCode(...iv, ...new Uint8Array(encrypted))),
+      key: btoa(String.fromCharCode(...new Uint8Array(keyData)))
+    };
+  } catch (e) {
+    console.error('Encryption failed:', e);
+    throw new Error('Failed to encrypt content');
   }
-  return result;
 }
 
-document.getElementById('paste-form').addEventListener('submit', async function(e) {
+function base64ToUrlSafe(base64) {
+  return base64.split('+').join('-').split('/').join('_').replace(/=+$/g, '');
+}
+
+function showShareUrl(url) {
+  const card = document.querySelector('.card');
+  if (!card) {
+    console.error('Card element not found');
+    return;
+  }
+  const div = document.createElement('div');
+  div.className = 'share-url';
+  const label = document.createElement('label');
+  label.textContent = 'Share this URL';
+  div.appendChild(label);
+  const input = document.createElement('input');
+  input.type = 'text';
+  input.readOnly = true;
+  input.value = url;
+  input.addEventListener('click', () => input.select());
+  div.appendChild(input);
+  card.insertBefore(div, card.firstChild);
+  input.select();
+}
+
+document.getElementById('paste-form')?.addEventListener('submit', async (e) => {
   e.preventDefault();
-  const content = document.getElementById('content').value;
-  const result = await encryptContent(content);
-  document.getElementById('encrypted-content').value = result.encrypted;
-  const response = await fetch('/', {
+
+  const submitButton = e.target.querySelector('button[type=\"submit\"]');
+  const contentInput = document.getElementById('content');
+  const encryptedInput = document.getElementById('encrypted-content');
+  const csrfInput = document.getElementById('csrf-token');
+
+  if (!contentInput || !encryptedInput || !csrfInput) {
+    console.error('Required form elements not found');
+    return;
+  }
+
+  if (submitButton) submitButton.disabled = true;
+
+  try {
+    const content = contentInput.value;
+    const { encrypted, key } = await encryptContent(content);
+    encryptedInput.value = encrypted;
+    const csrfToken = csrfInput.value;
+
+    const res = await fetch('/', {
       method: 'POST',
       headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    body: 'encrypted_content=' + encodeURIComponent(result.encrypted) + '&csrf_token=' + encodeURIComponent(document.getElementById('csrf-token').value)
+      body: `encrypted_content=${encodeURIComponent(encrypted)}&csrf_token=${encodeURIComponent(csrfToken)}`
     });
-  const html = await response.text();
-  const parser = new DOMParser();
-  const doc = parser.parseFromString(html, 'text/html');
-  const keyUrlSafe = await base64ToUrlSafeBase64(result.key);
-  const url = new URL(window.location.href);
-  const pasteId = doc.querySelector('[data-paste-id]').getAttribute('data-paste-id');
-  const pasteUrl = url.origin + '/paste/' + pasteId + '#' + keyUrlSafe;
 
+    const html = await res.text();
+    const doc = new DOMParser().parseFromString(html, 'text/html');
+    const pasteId = doc.querySelector('[data-paste-id]')?.getAttribute('data-paste-id');
+    if (!pasteId) throw new Error('No paste ID returned');
+
+    const pasteUrl = `${location.origin}/paste/${pasteId}#${base64ToUrlSafe(key)}`;
     document.body.replaceChildren(...doc.body.childNodes);
-  
-  const card = document.querySelector('.card');
-  const urlDiv = document.createElement('div');
-  urlDiv.className = 'share-url';
-  const lbl = document.createElement('label');
-  lbl.textContent = 'Share this URL';
-  urlDiv.appendChild(lbl);
-  const inp = document.createElement('input');
-  inp.type = 'text';
-  inp.readOnly = true;
-  inp.value = pasteUrl;
-  inp.onclick = function() { this.select(); };
-  urlDiv.appendChild(inp);
-  card.insertBefore(urlDiv, card.firstChild);
-  
-  window.history.replaceState({}, '', pasteUrl);
-  
-  inp.select();
+    showShareUrl(pasteUrl);
+    history.replaceState({}, '', pasteUrl);
+  } catch (err) {
+    console.error('Form submission failed:', err);
+    alert('Failed to create paste. Please try again.');
+    if (submitButton) submitButton.disabled = false;
+  }
 });
 "
 }

src/key.gleam

@@ -4,6 +4,7 @@ import gleam/crypto
 const key_length_bytes = 12
 
 pub fn generate() -> String {
-  crypto.strong_random_bytes(key_length_bytes)
+  key_length_bytes
+  |> crypto.strong_random_bytes
   |> bit_array.base64_url_encode(False)
 }

src/spasteg.gleam

@@ -29,6 +29,7 @@ pub fn main() {
       secret_key_base,
     )
     |> mist.new
+    |> mist.bind("0.0.0.0")
     |> mist.port(3000)
     |> mist.start
 

src/storage.gleam

@@ -1,6 +1,6 @@
 import gleam/dict.{type Dict}
 import gleam/erlang/process
-import gleam/option.{type Option, None, Some}
+import gleam/option.{type Option}
 import gleam/otp/actor
 
 const max_requests_per_minute = 10
@@ -12,53 +12,48 @@ pub type StorageState {
 pub type StorageMsg {
   CreatePaste(key: String, content: String, reply: process.Subject(Bool))
   GetPaste(key: String, reply: process.Subject(Option(String)))
-  PeekPaste(key: String, reply: process.Subject(Option(String)))
   CheckRateLimit(ip: String, reply: process.Subject(Bool))
-  ResetRateLimits
+}
+
+fn lookup_paste(state: StorageState, key: String) -> Option(String) {
+  state.pastes
+  |> dict.get(key)
+  |> option.from_result
 }
 
 pub fn handle_message(state: StorageState, msg: StorageMsg) {
   case msg {
     CreatePaste(key, content, reply) -> {
-      let new_state =
-        StorageState(dict.insert(state.pastes, key, content), state.rate_limits)
+      let new_pastes =
+        state.pastes
+        |> dict.insert(key, content)
       process.send(reply, True)
-      actor.continue(new_state)
-    }
-    PeekPaste(key, reply) -> {
-      let content = case dict.get(state.pastes, key) {
-        Ok(value) -> Some(value)
-        Error(_) -> None
-      }
-      process.send(reply, content)
-      actor.continue(state)
+      actor.continue(StorageState(new_pastes, state.rate_limits))
     }
     GetPaste(key, reply) -> {
-      let content = case dict.get(state.pastes, key) {
-        Ok(value) -> Some(value)
-        Error(_) -> None
-      }
-      let new_pastes = dict.delete(state.pastes, key)
-      let new_state = StorageState(new_pastes, state.rate_limits)
+      let content = lookup_paste(state, key)
+      let new_pastes =
+        state.pastes
+        |> dict.delete(key)
       process.send(reply, content)
-      actor.continue(new_state)
+      actor.continue(StorageState(new_pastes, state.rate_limits))
     }
     CheckRateLimit(ip, reply) -> {
-      let current_count =
-        dict.get(state.rate_limits, ip)
+      let count =
+        state.rate_limits
+        |> dict.get(ip)
         |> option.from_result
         |> option.unwrap(0)
-      let allowed = current_count < max_requests_per_minute
+      let allowed = count < max_requests_per_minute
       let new_limits = case allowed {
-        True -> dict.insert(state.rate_limits, ip, current_count + 1)
+        True ->
+          state.rate_limits
+          |> dict.insert(ip, count + 1)
         False -> state.rate_limits
       }
       process.send(reply, allowed)
       actor.continue(StorageState(state.pastes, new_limits))
     }
-    ResetRateLimits -> {
-      actor.continue(StorageState(state.pastes, dict.new()))
-    }
   }
 }
 

src/styles.gleam

@@ -1,250 +1,238 @@
+// this css is AI-generated, sorry, really not a front guy
+
 pub const shared_css = "
-* { margin: 0; padding: 0; box-sizing: border-box; }
 :root {
-  --bg-primary: #0d1117;
-  --bg-secondary: #161b22;
-  --bg-tertiary: #21262d;
-  --text-primary: #e6edf3;
-  --text-secondary: #8b949e;
+  --bg: #0d1117;
+  --bg2: #161b22;
+  --bg3: #21262d;
+  --fg: #e6edf3;
+  --dim: #8b949e;
   --accent: #58a6ff;
-  --accent-hover: #79c0ff;
-  --success: #238636;
-  --success-hover: #2ea043;
-  --warning: #d29922;
+  --green: #238636;
   --border: #30363d;
-  --radius: 12px;
-  --radius-sm: 6px;
+  --warning: #d29922;
+  --error: #f85149;
+  --mono: 'JetBrains Mono', monospace;
 }
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
 body {
-  font-family: 'Inter', system-ui, -apple-system, sans-serif;
-  background: var(--bg-primary);
-  color: var(--text-primary);
+  font-family: system-ui, sans-serif;
+  background: var(--bg);
+  color: var(--fg);
   min-height: 100vh;
   line-height: 1.6;
 }
+
+h2 {
+  font-size: 1.5rem;
+  margin-bottom: 16px;
+}
+
 .container {
   max-width: 900px;
   margin: 0 auto;
   padding: 40px 20px;
 }
-header { text-align: center; margin-bottom: 40px; }
-.tagline {
-  color: var(--text-secondary);
-  font-size: 1rem;
-  margin-top: 8px;
-  font-weight: 500;
+
+header {
+  text-align: center;
+  margin-bottom: 40px;
 }
+
 .logo {
   font-size: 2.5rem;
   font-weight: 700;
-  letter-spacing: -0.02em;
-  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
+  color: var(--accent);
 }
+
+.tagline {
+  color: var(--dim);
+  margin-top: 8px;
+}
+
 .card {
-  background: var(--bg-secondary);
+  background: var(--bg2);
   border: 1px solid var(--border);
-  border-radius: var(--radius);
+  border-radius: 12px;
   padding: 32px;
 }
-textarea {
-  width: 100%;
-  min-height: 300px;
-  background: var(--bg-tertiary);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  padding: 16px;
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 14px;
-  color: var(--text-primary);
-  resize: vertical;
-  transition: border-color 0.2s;
-}
-textarea:focus { outline: none; border-color: var(--accent); }
-textarea::placeholder { color: var(--text-secondary); }
-.actions {
-  margin-top: 24px;
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-}
-button, .btn-primary {
-  background: var(--success);
-  color: white;
-  border: none;
-  padding: 12px 24px;
-  border-radius: var(--radius-sm);
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: background 0.2s;
-  text-decoration: none;
-  display: inline-block;
-}
-button:hover:not(:disabled), .btn-primary:hover { background: var(--success-hover); }
-button:disabled { opacity: 0.5; cursor: not-allowed; }
-.btn-secondary {
-  background: transparent;
-  color: var(--text-primary);
-  border: 1px solid var(--border);
-  padding: 12px 24px;
-  border-radius: var(--radius-sm);
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  text-decoration: none;
-  display: inline-block;
-  transition: background 0.2s, border-color 0.2s;
-}
-.btn-secondary:hover { background: var(--bg-tertiary); border-color: var(--accent); }
-.btn-copy {
-  background: var(--accent);
-  color: var(--bg-primary);
-  border: none;
-  padding: 10px 20px;
-  border-radius: var(--radius-sm);
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: background 0.2s;
-  white-space: nowrap;
-}
-.btn-copy:hover { background: var(--accent-hover); }
-.url-section { margin-bottom: 24px; }
-.url-section label {
-  display: block;
-  margin-bottom: 8px;
-  color: var(--text-secondary);
-  font-size: 14px;
-  font-weight: 500;
-}
-.url-box {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-}
-.url-input {
-  flex: 1;
-  background: var(--bg-tertiary);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  padding: 12px 16px;
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 13px;
-  color: var(--text-primary);
-}
-.notice {
-  background: rgba(210, 153, 34, 0.15);
-  border: 1px solid var(--warning);
-  border-radius: var(--radius-sm);
-  padding: 16px;
-  margin-bottom: 24px;
-}
-.notice strong { color: var(--warning); }
-.paste-content, .paste-preview {
-  background: var(--bg-tertiary);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  padding: 20px;
-}
-.paste-preview { margin-bottom: 24px; }
-.paste-content pre, .paste-preview pre {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 14px;
-  line-height: 1.6;
-  color: var(--text-primary);
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  margin: 0;
-}
-footer {
-  text-align: center;
-  padding: 20px;
-  color: var(--text-secondary);
-  font-size: 13px;
-  margin-top: 20px;
-}
-.centered { text-align: center; padding: 40px; }
-.centered .logo { margin-bottom: 40px; }
-.centered .card { max-width: 500px; margin: 0 auto; }
-h2 { font-size: 1.5rem; margin-bottom: 16px; }
-.centered p { color: var(--text-secondary); margin-bottom: 24px; }
-.centered .btn-primary {
-  background: transparent;
-  color: var(--text-primary);
-  border: 1px solid var(--border);
-  padding: 12px 24px;
-  border-radius: var(--radius-sm);
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  text-decoration: none;
-  display: inline-block;
-  transition: background 0.2s, border-color 0.2s;
-}
-.centered .btn-primary:hover { background: var(--bg-tertiary); border-color: var(--accent); }
-header { margin-bottom: 30px; }
+
+textarea,
+.paste-content,
+.share-url input,
 input[readonly] {
-  background: var(--bg-tertiary);
+  width: 100%;
+  background: var(--bg3);
   border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  padding: 12px 16px;
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 13px;
-  color: var(--text-primary);
-  flex: 1;
+  border-radius: 6px;
+  padding: 14px;
+  font-family: var(--mono);
+  font-size: 14px;
+  color: var(--fg);
 }
-.hidden { display: none; }
-.warning {
-  background: rgba(248, 81, 73, 0.15);
-  border-color: #f85149;
+
+textarea {
+  min-height: 300px;
+  resize: vertical;
 }
-.warning strong { color: #f85149; }
-.error {
-  background: rgba(248, 81, 73, 0.15);
-  border: 1px solid #f85149;
-  border-radius: var(--radius-sm);
-  padding: 16px;
-  color: #f85149;
+
+textarea::placeholder {
+  color: var(--dim);
 }
+
+textarea:focus,
+.share-url input:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
 .share-url {
   margin-bottom: 24px;
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
+
 .share-url label {
-  color: var(--text-secondary);
+  color: var(--dim);
   font-size: 14px;
   font-weight: 500;
 }
-.share-url input {
-  width: 100%;
-  background: var(--bg-tertiary);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  padding: 12px 16px;
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 13px;
-  color: var(--text-primary);
-  cursor: text;
+
+.paste-content pre {
+  font-family: var(--mono);
+  font-size: 14px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  margin: 0;
 }
-.share-url input:focus {
-  outline: none;
+
+.actions {
+  margin-top: 24px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+.actions.center {
+  justify-content: center;
+}
+
+button,
+.btn-primary {
+  background: var(--green);
+  color: #fff;
+  border: none;
+  padding: 12px 24px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  text-decoration: none;
+  display: inline-block;
+}
+
+button:hover:not(:disabled),
+.btn-primary:hover {
+  filter: brightness(1.15);
+}
+
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.notice {
+  background: rgba(210,153,34,.15);
+  border: 1px solid var(--warning);
+  border-radius: 6px;
+  padding: 16px;
+  margin-bottom: 24px;
+}
+
+.notice strong {
+  color: var(--warning);
+}
+
+.notice.warning {
+  background: rgba(248,81,73,.15);
+  border-color: var(--error);
+}
+
+.notice.warning strong {
+  color: var(--error);
+}
+
+.error {
+  background: rgba(248,81,73,.15);
+  border: 1px solid var(--error);
+  border-radius: 6px;
+  padding: 16px;
+  color: var(--error);
+}
+
+footer {
+  text-align: center;
+  padding: 20px;
+  color: var(--dim);
+  font-size: 13px;
+  margin-top: 20px;
+}
+
+.centered {
+  text-align: center;
+  padding: 40px;
+}
+
+.centered .logo {
+  margin-bottom: 40px;
+}
+
+.centered .card {
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+.centered p {
+  color: var(--dim);
+  margin-bottom: 24px;
+}
+
+.centered .btn-primary {
+  background: transparent;
+  color: var(--fg);
+  border: 1px solid var(--border);
+  font-weight: 500;
+}
+
+.centered .btn-primary:hover {
+  background: var(--bg3);
   border-color: var(--accent);
 }
+
+.hidden {
+  display: none;
+}
+
 #loading {
   text-align: center;
   padding: 40px;
-  color: var(--text-secondary);
+  color: var(--dim);
 }
+
 .mascot {
   display: inline-flex;
   vertical-align: middle;
   margin-left: 4px;
 }
+
 .mascot svg {
   height: 1em;
   width: auto;

test/spasteg_test.gleam

@@ -1 +1,26 @@
+import gleam/list
+import gleam/string
+import gleeunit
+import gleeunit/should
+import key
 
+pub fn main() {
+  gleeunit.main()
+}
+
+pub fn generate_test() {
+  let key_result = key.generate()
+  let allowed_chars =
+    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_"
+
+  key_result |> should.not_equal("")
+
+  key_result
+  |> string.length
+  |> should.equal(16)
+
+  key_result
+  |> string.to_graphemes
+  |> list.all(fn(char) { allowed_chars |> string.contains(char) })
+  |> should.be_true
+}