STUDIO PICK · TEMPLATE

Afterhours — terminal BBS

A phosphor-green bulletin board with a text-mode border, live command prompt and navigable local boards.

LIVE PREVIEW Isolated & interactive
<!-- Original layout, SVG/CSS artwork and JavaScript © 2026 XXC Templates. MIT License.
Visual pattern references (original code, names and content; no affiliation):
Chaos Computer Club: https://www.ccc.de/en/
Technical community identity, a compact news archive and persistent topic navigation.
Neocities: https://neocities.org/
Independent-web personality, small-site discovery and expressive personal spaces.
Illustrative sample content and data; no real accounts, payments, reservations or messages. -->
<main>
  <header><span>CONNECTED: LOCAL DEMO</span><span>2400 BAUD / 8-N-1</span></header>
  <section class="terminal">
    <pre class="ascii" aria-hidden="true">
╔══════════════════════════════╗
║  A F T E R H O U R S   B B S  ║
╚══════════════════════════════╝</pre>
    <h1 class="sr-only">Afterhours bulletin board</h1>
    <p>
      A place for late-night ideas and long conversations.<br />Leave the noise at the door. Bring
      your curiosity.
    </p>
    <div class="menu">
      <button id="change" data-board="projects">[1] PROJECTS</button
      ><button data-board="messages">[2] MESSAGES</button
      ><button data-board="help">[?] HELP</button>
    </div>
    <div id="screen">
      <p>WELCOME, TRAVELER_</p>
      <p>There are 12 people quietly making things.</p>
      <p>Select a board, or type projects, messages or help.</p>
    </div>
    <label for="command">guest@afterhours:~$</label>
    <div class="prompt">
      <input id="command" autocomplete="off" spellcheck="false" placeholder="help" /><button
        id="enter"
      >
        ENTER ↵
      </button>
    </div>
    <output data-status aria-live="polite"></output>
  </section>
  <footer class="demo-note">Fictional brand · local interface demo · no information is sent</footer>
</main>
Revision history · 1 versions
v12026-10-05 18:26:30 UTC

Keep the ideas flowing.

Explore the library
HELP KEEP THE WORKSHOP USEFUL

Report this creation

ONE QUICK CHECK

Continue?