> MAN_PAGE TERMINAL UI _

A complete manual for retro terminal CSS/JS components. Terminal UI adds data-attribute helpers, command palette, theme presets, safer JS defaults, and reusable docs/landing modules.

> 01. STARTER TEMPLATE (BOILERPLATE)

Copy this empty HTML boilerplate to start fresh with Terminal UI.

<!DOCTYPE html>
<html lang="en" data-terminal-theme="green">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bunker OS</title>
    <link rel="icon" type="image/svg+xml" href="assets/terminal-icon.svg">
    <link rel="stylesheet" href="assets/terminal.css">
</head>
<body class="t-crt">
    <div class="t-container">
        <!-- Your UI code goes here -->
    </div>
    <script src="assets/terminal.js"></script>
</body>
</html>

> 02. THEME CUSTOMIZATION

Terminal UI is designed to be customizable. Change the scheme by overriding variables in your custom CSS.

:root {
    --t-green: #ffb000;           /* foreground */
    --t-green-dim: #996900;       /* foreground, dimmed */
    --t-accent-rgb: 255, 176, 0;  /* same colour as R, G, B - see note */
    --bg-base: #110d00;
    --bg-surface: #1f1700;
}

--t-accent-rgb must match --t-green. Every translucent accent wash — hover glows, tinted panels, dashed borders, the dot grid, focus rings, box shadows — is written as rgba(var(--t-accent-rgb), <alpha>). Override --t-green on its own and the solid foreground changes while roughly fifty washes behind it stay on the old colour, which reads as a colour bleed.

Optional, for full control: --t-white (near-white text, keep a faint cast of the theme) and --t-code-fg (code foreground). Both have sensible green defaults. Legacy comma syntax is required in --t-accent-rgb: rgba(var(--x), 0.05) is supported everywhere, whereas color-mix() and the modern slash syntax are not.

> 03. UTILITY CLASSES

D-FLEX & T-BLINK
FS-SMALL & TEXT-MUTED
<div class="d-flex justify-content-between align-items-center mb-3">
    <div class="text-danger font-bold t-blink">D-FLEX & T-BLINK</div>
    <div class="fs-small text-muted">FS-SMALL & TEXT-MUTED</div>
</div>
Utility_Classes_List.txt
Flexbox: .d-flex, .flex-column, .justify-content-center, .justify-content-between, .align-items-center, .gap-2
Sizing: .w-25, .w-50, .w-75, .w-100, .h-100, .w-auto
Spacing: .m-0 to .m-5, .p-0 to .p-5, .px-3, .py-2, etc.
Typography: .text-center, .text-right, .font-bold, .fs-small
Visual: .t-glow, .t-flicker, .t-border-bottom

> 04. RESPONSIVENESS & BREAKPOINTS

> VISIBLE ON DESKTOP ONLY (.d-none-mobile)
> VISIBLE ON MOBILE ONLY (.d-none-desktop)
<div class="d-none-mobile">Desktop Only</div>
<div class="d-none-desktop">Mobile Only</div>

> 05. LAYOUT MODULES

A. KANBAN BOARD (.t-board)

PENDING
Data Task
URGENT
System Breached!
<div class="t-board">
    <div class="t-board-column">
        <div class="t-board-header">PENDING</div>
        <div class="t-board-body"><div class="t-board-card">Data Task</div></div>
    </div>
</div>

B. THREAD CONNECTOR (.t-thread)

10:00 AM

Satellite is airborne.

<div class="t-thread">
    <div class="t-thread-item">
        <span class="text-muted fs-small">10:00 AM</span>
        <p class="m-0">Satellite is airborne.</p>
    </div>
</div>

C. MARKDOWN BODY (.t-markdown)

Terminal Heading

Text with inline_code.

Message: Defend the bunker!
<div class="t-markdown">
    <h3>Terminal Heading</h3>
    <p>Text with <code>inline_code</code>.</p>
</div>

> 06. VISUAL FILTERS

Retro Filter 
<img src="image.jpg" class="t-retro-filter">

> 08. CENTER SCREEN

> SYSTEM_LOGIN
<div class="t-center-screen">
    <div class="t-center-box t-card">...</div>
</div>

> 09. CONTAINERS & GRID

COL 1
COL 2
<div class="t-grid t-grid-2">
    <div>COL 1</div>
    <div>COL 2</div>
</div>

> 10. SIDEBAR LAYOUT

MAIN_PANEL (70%)
SIDEBAR (30%)
<div class="t-grid-layout">
    <div class="t-main-panel">MAIN (70%)</div>
    <div class="t-side-panel">SIDE (30%)</div>
</div>

> 11. CONTENT BOXES (CARDS)

> CRITICAL

System error.

<div class="t-card danger">
    <div class="t-card-header">> CRITICAL</div>
    <p>Error.</p>
</div>

> 12. TERMINAL WINDOW

root@bunker:~#[ - ] [ X ]
Ping 192.168.1.1...
<div class="t-window">
    <div class="t-window-header"><span>root@bunker:~#</span></div>
    <pre class="t-window-body"><code>Ping 192.168.1.1...</code></pre>
</div>

> 13. BUTTONS & INPUTS

<input type="text" class="t-input" placeholder="IP">
<button class="t-btn">SCAN</button>

> 14. FORM VALIDATION

> SYS_ERR. 
<input type="password" class="t-input error">
<span class="t-feedback text-danger">ERR</span>

> 15. INPUT ACTION

<div class="t-input-group">
    <input type="password" id="passToken" class="t-input">
    <button class="t-input-action-btn" onclick="Terminal.toggleInputAction('passToken', this)">[ SHOW ]</button>
</div>

> 16. TEXTAREA & SELECT

<select class="t-select"><option>PUBLIC</option></select>
<textarea class="t-textarea"></textarea>

> 17. CHECKBOX & RADIO

<label class="t-checkbox-label">
    <input type="checkbox" checked><span class="t-checkmark"></span> Enable
</label>

> 18. BREADCRUMBS & PAGINATION

<ul class="t-breadcrumb">
    <li><a href="#">ROOT</a></li>
    <li class="active">LOGS.TXT</li>
</ul>
<div class="t-pagination">
    <button class="t-page-btn">1</button>
</div>

> 19. DATA TABLES

IDFILE
01data.sql
 
<table class="t-table">
    <thead><tr><th>ID</th></tr></thead>
    <tbody><tr><td>01</td></tr></tbody>
</table>

> 20. LIST GROUPS

STATION_BRAVO 
<div class="t-list-group">
    <a href="#" class="t-list-item active">
        <span class="t-list-item-title">STATION</span>
    </a>
</div>

> 21. CHAT BUBBLES

Incoming message
My message
<div class="t-chat-container">
    <div class="t-bubble t-bubble-them">Incoming</div>
    <div class="t-bubble t-bubble-me">My</div>
</div>

> 22. BADGES & PROGRESS

PENDING
50%
<span class="t-badge warning">PENDING</span>
<div class="t-progress-bg">
    <div class="t-progress-bar w-50">50%</div>
</div>

> 23. LED INDICATORS

OK   FAIL 
<span class="t-led-dot t-led-green"></span> OK

> 24. ALERTS & SPINNER

> SECURITY BREACH!
Status: PROCESSING 
<div class="t-alert danger">> BREACH!</div> 
<span class="t-spinner"></span>

> 25. TAB SYSTEM

Main tab content.
<div class="t-tabs-wrapper">
    <div class="t-tabs-header">
        <button class="t-tab-btn active" data-t-tab="t1">MAIN</button>
    </div>
    <div id="t1" class="t-tab-content active">Content</div>
</div>

> 26. ACCORDION & TOOLTIP

Classified content.

Hover Text.

<div class="t-accordion">
    <button class="t-accordion-btn" data-t-accordion>DIR</button>
</div>
<span data-tooltip="Info">Hover</span>

> 28. NOTIFICATIONS (TOAST)

<button class="t-btn" onclick="Terminal.toast('Secure.', 'normal')">Toast</button>

> 29. BRANDING (ICON)

Logo 
<link rel="icon" type="image/svg+xml" href="terminal-icon.svg">

> 30. NEW EXTENSIONS

A. DROPDOWN MENU (.t-dropdown)

> SCAN 
<div class="t-dropdown">
    <button class="t-btn" data-t-dropdown>[ v ]</button>
    <div class="t-dropdown-menu">...</div>
</div>

B. TOGGLE SWITCH (.t-switch)

> POWER 
<label class="t-switch">
    <input type="checkbox">
    <span class="t-switch-slider"></span>
</label>

C. RANGE SLIDER (.t-range)

<input type="range" class="t-range">

D. TREE VIEW (.t-tree)

<ul class="t-tree">
    <li>
        <span class="t-tree-folder" onclick="Terminal.treeToggle(this)">root</span>
    </li>
</ul>

E. JS TYPEWRITER

<button onclick="Terminal.typewrite('demo', 'TEXT', 50)">PLAY</button>

> 31. MEDIA EXTENSIONS

A. CUSTOM FILE UPLOAD

> FILE 
<div class="t-file-wrapper">
    <span class="t-file-btn" id="file-label">> FILE</span>
    <input type="file" id="file-input" onchange="Terminal.fileInput('file-input', 'file-label')">
</div>

B. IMAGE LIGHTBOX

Demo 
<img src="terminal-icon.svg" width="60" class="t-retro-filter" data-t-lightbox alt="Demo">

C. EMPTY STATE

馃摗 [ EMPTY ] 
<div class="t-empty-state">
    <span class="t-empty-state-icon">馃摗</span>
    [ EMPTY ]
</div>

D. SKELETON LOADER

<div class="t-skeleton"></div>

E. BILINGUAL COMMAND

A CSS-only text swap primitive. Defaults to the primary language and reveals the alt text on hover.

> HOVER_MEBILINGUAL_TEST 
<button class="t-btn t-bilingual-btn">
    <span class="t-lang-default">[ OK ]</span>
    <span class="t-lang-alt">[ SETUJU ]</span>
</button>

> 32. SOCIAL & APP

A. AVATAR & SPOILER

?
> CLASSIFIED
<div class="d-flex gap-3">
    <div class="t-avatar">?</div>
    <div class="p-3 border-dashed t-spoiler bg-surface">> CLASSIFIED</div>
</div>

B. EDITOR / COMPOSER

<div class="t-editor-card mb-0">
    <div class="t-editor-toolbar">
        <button class="t-editor-btn">[ B ]</button>
        <button class="t-editor-btn">[ I ]</button>
        <button class="t-editor-btn">[ LINK ]</button>
        <button class="t-editor-btn">[ IMG ]</button>
    </div>
    <textarea class="t-editor-textarea" rows="2"></textarea>
</div>

C. TIMELINE FEED

User
Jean @jeannesbryan 路 12 hours ago
Target locked.
<div class="t-feed-card mb-0">
    <div class="t-avatar"><img src="terminal-icon.svg" alt="User"></div>
    <div class="t-feed-main">
        <div class="t-feed-header">
            <a href="#" class="t-feed-author text-success font-bold">Jean</a>
            <span class="t-feed-meta text-muted">@jeannesbryan 路 12 hours ago</span>
        </div>
        <div class="t-feed-content text-success">Target locked.</div>
        <div class="t-feed-actions mt-3 pt-2 border-top">
            <button class="t-feed-btn">[ REPLY ]</button>
            <button class="t-feed-btn">[ REPOST ]</button>
            <button class="t-feed-btn text-warning">[ FAV ]</button>
            <button class="t-feed-btn">[ MARK ]</button>
        </div>
    </div>
</div>

D. ACTIVITY METRICS

User
Jean @jeannesbryan 路 jeannesbryan.my.id 路 12 hours ago
[BIKE]

KAMIS MENGKIS

CYCLING
80.94 km
DISTANCE
06:39:28
DURATION
12.16 km/h
AVG SPEED
1546 m
ELEVATION GAIN
Completed a 80.94 km cycling in 06:39:28.
<div class="t-feed-card mb-0">
    <div class="t-avatar"><img src="terminal-icon.svg" alt="User"></div>
    <div class="t-feed-main">
        <div class="t-feed-header">
            <a href="#" class="t-feed-author text-success font-bold">Jean</a>
            <span class="t-feed-meta text-muted">@jeannesbryan 路 jeannesbryan.my.id 路 12 hours ago</span>
        </div>
        <div class="t-activity-header mt-3 d-flex align-items-center gap-3">
            <div class="border-dashed p-2 font-bold fs-3 text-success">[BIKE]</div>
            <div>
                <h4 class="t-activity-title text-success m-0">KAMIS MENGKIS</h4>
                <span class="t-activity-type text-muted">CYCLING</span>
            </div>
        </div>
        <hr class="t-divider">
        <div class="t-activity-metrics mb-4 mt-3">
            <div class="t-metric-box w-100 mb-4">
                <div class="t-metric-val t-metric-large text-success">80.94 <span class="t-metric-unit">km</span></div>
                <span class="t-metric-lbl text-muted">DISTANCE</span>
            </div>
            <div class="d-flex gap-4 flex-wrap">
                <div class="t-metric-box">
                    <div class="t-metric-val fs-2 text-success">06:39:28</div>
                    <span class="t-metric-lbl text-muted">DURATION</span>
                </div>
                <div class="t-metric-box">
                    <div class="t-metric-val fs-2 text-success">12.16 <span class="t-metric-unit fs-small">km/h</span></div>
                    <span class="t-metric-lbl text-muted">AVG SPEED</span>
                </div>
                <div class="t-metric-box">
                    <div class="t-metric-val fs-2 text-success">1546 <span class="t-metric-unit fs-small">m</span></div>
                    <span class="t-metric-lbl text-muted">ELEVATION GAIN</span>
                </div>
            </div>
        </div>
        <div class="t-feed-content text-success">Completed a 80.94 km cycling in 06:39:28.</div>
    </div>
</div>
> ACCESS

System responding.