The Dead Letter Office

Write something
that goes nowhere.

This letter will be stored in a PostgreSQL database and never delivered. No one will read it. That is the point. Some things need to be said without needing to arrive.

0 / 2000

Stored. Unread. Permanent.

write.sql
-- ═══════════════════════════════════════════════════════════
--  THE DEAD LETTER OFFICE — write something that goes nowhere
-- ═══════════════════════════════════════════════════════════

WITH

styles AS (SELECT $css$
  @import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Space+Mono:wght@400;700&display=swap');
  :root { --bg:#0d0d10; --sf:#13131a; --fg:#f0ede6; --mu:#7a7870; --ac:#c8a96e; --bd:rgba(200,169,110,0.18); }
  *,*::before,*::after{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;}
  body{background:var(--bg);color:var(--fg);font-family:'EB Garamond',Georgia,serif;font-size:18px;line-height:1.6;}
  a{color:inherit;text-decoration:none;}
  nav{display:flex;justify-content:space-between;align-items:center;padding:1.4rem 4rem;
      border-bottom:1px solid var(--bd);position:sticky;top:0;background:rgba(13,13,16,.94);
      backdrop-filter:blur(12px);z-index:100;}
  .logo{font-family:'Space Mono',monospace;font-size:.8rem;letter-spacing:.22em;color:var(--ac);}
  .nav-links a{font-family:'Space Mono',monospace;font-size:.65rem;letter-spacing:.14em;
               margin-left:2rem;color:var(--mu);transition:color .2s;}
  .nav-links a:hover{color:var(--fg);}
  #sql-toggle-btn{font-family:'Space Mono',monospace;font-size:.65rem;letter-spacing:.14em;
    margin-left:1.8rem;color:var(--ac);background:none;border:none;cursor:pointer;padding:0;transition:opacity .2s;}
  #sql-toggle-btn:hover{opacity:.7;}
  #sql-panel{position:fixed;inset:0;z-index:999;background:var(--bg);display:flex;flex-direction:column;
    transform:translateY(100%);transition:transform .38s cubic-bezier(.4,0,.2,1);overflow:hidden;}
  #sql-panel.open{transform:translateY(0);}
  #sql-panel-header{display:flex;justify-content:space-between;align-items:center;
    padding:1.2rem 4rem;border-bottom:1px solid var(--bd);
    background:rgba(13,13,16,.96);backdrop-filter:blur(12px);flex-shrink:0;}
  #sql-panel-filename{font-family:'Space Mono',monospace;font-size:.65rem;letter-spacing:.22em;color:var(--ac);text-transform:uppercase;}
  #sql-panel-close{font-family:'Space Mono',monospace;font-size:.65rem;letter-spacing:.14em;
    color:var(--mu);background:none;border:none;cursor:pointer;transition:color .2s;}
  #sql-panel-close:hover{color:var(--fg);}
  #sql-panel-body{flex:1;overflow-y:auto;padding:2.5rem 4rem 4rem;}
  #sql-panel-pre{font-family:'Space Mono',monospace;font-size:.72rem;line-height:1.85;
    white-space:pre-wrap;word-break:break-word;color:#bbb;background:none;border:none;padding:0;margin:0;}
  .sk{color:#c8a96e;font-weight:700;}.ss{color:#a8c97f;}.sc{color:#4a5060;font-style:italic;}.sn{color:#79b8e0;}

  .page{max-width:680px;margin:0 auto;padding:7rem 4rem 9rem;}
  .eyebrow{font-family:'Space Mono',monospace;font-size:.62rem;letter-spacing:.3em;
           color:var(--ac);text-transform:uppercase;display:block;margin-bottom:2.2rem;}
  .title{font-size:clamp(3rem,6vw,5.5rem);font-weight:400;line-height:1.0;
         letter-spacing:-.03em;margin-bottom:1.8rem;}
  .title em{font-style:italic;color:var(--ac);}
  .sub{font-size:1.15rem;color:var(--mu);line-height:1.85;margin-bottom:4rem;max-width:480px;}
  .sub em{color:var(--fg);font-style:italic;}
  .rule{height:1px;background:var(--bd);margin-bottom:3.5rem;}
  .field{display:flex;flex-direction:column;gap:.65rem;margin-bottom:2rem;}
  .field label{font-family:'Space Mono',monospace;font-size:.58rem;letter-spacing:.2em;
               color:var(--mu);text-transform:uppercase;}
  .field input,.field textarea{background:var(--sf);border:1px solid var(--bd);color:var(--fg);
    font-family:'EB Garamond',serif;font-size:1.15rem;padding:.8rem 1.1rem;
    outline:none;width:100%;resize:vertical;transition:border-color .2s;line-height:1.6;}
  .field input::placeholder,.field textarea::placeholder{color:var(--mu);font-style:italic;}
  .field input:focus,.field textarea:focus{border-color:rgba(200,169,110,.45);}
  .field textarea{min-height:220px;}
  .char-count{font-family:'Space Mono',monospace;font-size:.52rem;letter-spacing:.1em;
              color:var(--mu);text-align:right;margin-top:.3rem;}
  .submit-row{display:flex;justify-content:space-between;align-items:center;margin-top:2.8rem;}
  .submit-note{font-size:.95rem;color:var(--mu);font-style:italic;max-width:280px;line-height:1.6;}
  .btn{font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.14em;
       padding:.85rem 2.2rem;border:1px solid var(--ac);color:var(--ac);
       background:transparent;cursor:pointer;transition:all .25s;}
  .btn:hover{background:var(--ac);color:var(--bg);}

  .sent-box{text-align:center;padding:4rem 0;}
  .sent-glyph{font-size:3rem;opacity:.4;display:block;margin-bottom:2rem;}
  .sent-title{font-size:clamp(2rem,4vw,3rem);font-weight:400;letter-spacing:-.02em;margin-bottom:1rem;}
  .sent-title em{font-style:italic;color:var(--ac);}
  .sent-sub{font-size:1.05rem;color:var(--mu);line-height:1.85;max-width:400px;margin:0 auto 3rem;}
  .sent-link{font-family:'Space Mono',monospace;font-size:.65rem;letter-spacing:.14em;
             color:var(--mu);border-bottom:1px solid var(--bd);padding-bottom:.2rem;transition:color .2s,border-color .2s;}
  .sent-link:hover{color:var(--ac);border-color:var(--ac);}

  footer{display:flex;justify-content:space-between;align-items:center;
         padding:1.8rem 4rem;border-top:1px solid var(--bd);}
  footer span{font-family:'Space Mono',monospace;font-size:.62rem;letter-spacing:.12em;color:var(--mu);}
  .pg-badge{color:var(--ac) !important;}

  @media(max-width:768px){
    nav{padding:1.2rem 1.5rem;}
    .nav-links a{margin-left:1rem;font-size:.58rem;}
    #sql-toggle-btn{margin-left:1rem;font-size:.58rem;}
    #sql-panel-header{padding:1rem 1.5rem;}
    #sql-panel-body{padding:1.5rem;}
    #sql-panel-pre{font-size:.6rem;}
    .page{padding:3.5rem 1.5rem 5rem;}
    .submit-row{flex-direction:column;align-items:flex-start;gap:1.5rem;}
    .submit-note{max-width:100%;}
    .sent-box{padding:3rem 0;}
    footer{padding:1.5rem;flex-direction:column;gap:.6rem;text-align:center;}
  }
$css$ AS css),

-- ─── SENT CONFIRMATION CHECK ─────────────────────────────────
-- false is replaced by server.js with 'true' or 'false'
params AS (SELECT '__SENT__'::text AS sent),

nav AS (
  SELECT
    '<nav>'
    || '<span class="logo">THE DEAD LETTER OFFICE</span>'
    || '<div class="nav-links">'
    || '<a href="/">&larr; Studio Null</a>'
    || '<button id="sql-toggle-btn" onclick="toggleSQL()">[ sql ]</button>'
    || '</div>'
    || '</nav>'
  AS html
),

body_html AS (
  SELECT CASE
    WHEN sent = 'true' THEN
      '<div class="page">'
      || '<div class="sent-box">'
      || '<span class="sent-glyph">&#x2709;</span>'
      || '<h2 class="sent-title">Your letter<br><em>is nowhere.</em></h2>'
      || '<p class="sent-sub">It was received. It will not be read. It is perfectly preserved in a database, undelivered, exactly as you wrote it. This is what you asked for.</p>'
      || '<a href="/write" class="sent-link">Write another &rarr;</a>'
      || '</div>'
      || '</div>'
    ELSE
      '<div class="page">'
      || '<span class="eyebrow">The Dead Letter Office</span>'
      || '<h1 class="title">Write something<br><em>that goes nowhere.</em></h1>'
      || '<p class="sub">This letter will be stored in a PostgreSQL database and never delivered. No one will read it. <em>That is the point.</em> Some things need to be said without needing to arrive.</p>'
      || '<div class="rule"></div>'
      || '<form method="POST" action="/letters/send">'
      || '<div class="field"><label for="dl-author">Your name (optional)</label>'
      || '<input id="dl-author" name="author" type="text" placeholder="Anonymous" maxlength="80" autocomplete="off"></div>'
      || '<div class="field"><label for="dl-body">Your letter</label>'
      || '<textarea id="dl-body" name="body" placeholder="Dear &#8212;" maxlength="2000" required oninput="document.getElementById(''cc'').textContent=this.value.length+'' / 2000''"></textarea>'
      || '<div class="char-count" id="cc">0 / 2000</div>'
      || '</div>'
      || '<div class="submit-row">'
      || '<p class="submit-note">Stored. Unread. Permanent.</p>'
      || '<button type="submit" class="btn">Send it nowhere &rarr;</button>'
      || '</div>'
      || '</form>'
      || '</div>'
  END AS html
  FROM params
),

footer AS (
  SELECT
    '<footer>'
    || '<span>Dead Letter Office &nbsp;&middot;&nbsp; Studio Null</span>'
    || '<span class="pg-badge">&laquo; PostgreSQL '
    || current_setting('server_version')
    || ' &nbsp;&middot;&nbsp; __QUERY_MS__ms &raquo;</span>'
    || '</footer>'
  AS html
),

page AS (
  SELECT
    '<!DOCTYPE html><html lang="en"><head>'
    || '<meta charset="UTF-8">'
    || '<meta name="viewport" content="width=device-width,initial-scale=1.0">'
    || '<title>Dead Letter Office &mdash; Studio Null</title>'
    || '<link rel="icon" type="image/svg+xml" href="/favicon.svg">'
    || '<style>' || styles.css || '</style>'
    || '</head><body>'
    || nav.html
    || body_html.html
    || footer.html
    || '__SQL_PANEL__'
    || '</body></html>'
  AS html
  FROM styles, nav, body_html, footer
)

SELECT html FROM page;