> MAN_PAGE TERMINAL UI _

A complete manual for Bunker/Retro styled CSS/JS components. Terminal UI now features a theme modification system, form validation, and 30 interface modules.

> 01. STARTER TEMPLATE (BOILERPLATE)

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

<!DOCTYPE html>
<html lang="en">
<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 href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
    <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 (CSS VARIABLES)

Terminal UI is designed to be customizable. You can change the "Matrix Green" color scheme to a "Fallout Amber", "Blood Red", or "Sci-Fi Cyan" theme simply by overriding variables in your custom CSS file.

/* Add this to your custom CSS file or inside <style> */
:root {
    /* Fallout Theme (Amber) */
    --t-green: #ffb000;         /* Change primary color to Amber */
    --t-green-dim: #996900;     /* Its dimmed color */
    
    /* Background colors */
    --bg-base: #110d00;
    --bg-surface: #1f1700;
}

> 03. UTILITY CLASSES

Adapting standard utility naming (similar to Bootstrap/Tailwind) so you don't need to write inline CSS.

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

Terminal UI is Mobile-First. Grid structures automatically collapse into 1 full column on screens smaller than 768px (Tablet/Mobile).

You can also use explicit responsive utilities to show or hide elements based on screen size:

> VISIBLE ON DESKTOP ONLY (.d-none-mobile)

> VISIBLE ON MOBILE ONLY (.d-none-desktop)

<!-- Will be hidden on mobile -->
<div class="d-none-mobile">Desktop Only</div>

<!-- Will be hidden on desktop -->
<div class="d-none-desktop">Mobile Only</div>

> 05. LAYOUT MODULES

Built-in complex modules for building specific applications.

A. KANBAN BOARD (.t-board)

PENDING

Data Encryption Task

Server Patching

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 Encryption Task</div>
            <div class="t-board-card">Server Patching</div>
        </div>
    </div>
    <div class="t-board-column">
        <div class="t-board-header text-danger">URGENT</div>
        <div class="t-board-body">
            <div class="t-board-card t-flicker">System Breached!</div>
        </div>
    </div>
</div>

B. THREAD CONNECTOR (.t-thread)

10:00 AM

Satellite is airborne.

10:15 AM

Receiving transmission from Sector 7.

<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 class="t-thread-item">
        <span class="text-muted fs-small">10:15 AM</span>
        <p class="m-0">Receiving transmission from Sector 7.</p>
    </div>
</div>

C. MARKDOWN BODY (.t-markdown)

Terminal Heading

Normal text with inline_code in the middle.

Message from commander: Defend the bunker!

<div class="t-markdown">
    <h3>Terminal Heading</h3>
    <p>Normal text with <code>inline_code</code> in the middle.</p>
    <blockquote>Message from commander: Defend the bunker!</blockquote>
</div>

> 06. VISUAL FILTERS

Use the .t-retro-filter class on images (img) or iframes to instantly transform them into an old-school monochrome green/sepia style.

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

> 07. NAVBAR (STATUS BAR)

Now equipped with a mobile-ready hamburger menu. Use .t-nav-toggler and .t-nav-collapse to enable it.

<nav class="t-navbar">
    <div class="t-nav-brand">BUNKER_OS</div>
    
    <!-- Mobile toggler button -->
    <button class="t-nav-toggler d-none-desktop" onclick="Terminal.navbarToggle('demoMenu')">[ MENU ]</button>
    
    <!-- Menu wrapper with collapse class -->
    <div class="t-nav-menu t-nav-collapse" id="demoMenu">
        <a href="#">[ HOME ]</a>
        <a href="#">[ SYSTEM ]</a>
    </div>
</nav>

> 08. CENTER SCREEN (LOGIN/INSTALL)

> SYSTEM_LOGIN

<div class="t-center-screen">
    <div class="t-center-box t-card">
        <div class="t-card-header">> SYSTEM_LOGIN</div>
        <input type="password" class="t-input text-center" placeholder="PASSCODE">
        <button class="t-btn mt-2 w-100">ENTER</button>
    </div>
</div>

> 09. CONTAINERS & GRID

Choose the main container width for your page and divide it into symmetrical grid columns.

A. CONTAINERS

.t-container (Max: 800px) - Suitable for reading/forms.

.t-container-fluid (Max: 1200px) - Suitable for dashboards.

<!-- Standard width (Focus) -->
<div class="t-container">...</div>

<!-- Full width (Dashboard) -->
<div class="t-container-fluid">...</div>

B. SYMMETRICAL GRID

COLUMN 1

COLUMN 2

COL 1

COL 2

COL 3

<div class="t-grid t-grid-2">
    <div class="p-2 text-center border-dashed">COLUMN 1</div>
    <div class="p-2 text-center border-dashed">COLUMN 2</div>
</div>

> 10. SIDEBAR LAYOUT (RELAY-STYLE)

MAIN_PANEL (70%)

SIDEBAR (30%)

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

> 11. CONTENT BOXES (CARDS)

> SERVER_STATUS

Satellite system is running in optimal condition.

> ALERT_SYSTEM

Minor warning regarding storage capacity.

> CRITICAL_WARNING

Anomaly detected in the firewall. Urgent!

<div class="t-card">
    <div class="t-card-header">> SERVER_STATUS</div>
    <p>Satellite system is running...</p>
</div>

<div class="t-card warning">
    <div class="t-card-header">> ALERT_SYSTEM</div>
    <p>Minor warning.</p>
</div>

<div class="t-card danger">
    <div class="t-card-header">> CRITICAL_WARNING</div>
    <p>Anomaly detected in the firewall.</p>
</div>

> 12. TERMINAL WINDOW (CODE BLOCK)

Epic components for displaying scripts or console outputs.

root@bunker:~#[ - ] [ X ]

Ping 192.168.1.1...
Reply from 192.168.1.1: bytes=32 time<1ms TTL=64
> CONNECTION STABLE.

<div class="t-window">
    <div class="t-window-header">
        <span>root@bunker:~#</span>
        <span>[ - ] [ X ]</span>
    </div>
    <pre class="t-window-body"><code>Ping 192.168.1.1...
Reply from 192.168.1.1: bytes=32 time<1ms TTL=64
> CONNECTION STABLE.</code></pre>
</div>

> 13. BUTTONS & INPUTS

Target IP Address

<label class="t-form-label">Target IP Address</label>
<input type="text" class="t-input mb-3" placeholder="E.g.: 192.168.1.1">
<div class="d-flex gap-2">
    <button class="t-btn w-100">NORMAL SCAN</button>
    <button class="t-btn danger w-100" disabled>LOCKED</button>
</div>

> 14. FORM VALIDATION

Use additional classes to notify users if their input is incorrect or successfully verified.

> OLD PASSWORD > SYS_ERR: Password mismatch. > NEW PASSWORD > PASSWORD STRENGTH: OPTIMAL.

<!-- Input Error -->
<input type="password" class="t-input error" value="wrong">
<span class="t-feedback text-danger">> SYS_ERR: Password mismatch.</span>

<!-- Input Success -->
<input type="password" class="t-input success" value="correct">
<span class="t-feedback text-success">> PASSWORD STRENGTH: OPTIMAL.</span>

> 15. INPUT ACTION

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

> 16. TEXTAREA & SELECT

<select class="t-select">
    <option>PUBLIC_BROADCAST</option>
</select>
<textarea class="t-textarea" rows="3" placeholder="Type encrypted message here..."></textarea>

> 17. CHECKBOX & RADIO

Route Encryption Active Node

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

<label class="t-radio-label mt-2">
    <input type="radio" name="opt" checked>
    <span class="t-radiomark"></span> Active Node
</label>

> 18. BREADCRUMBS & PAGINATION

<ul class="t-breadcrumb">
    <li><a href="#">ROOT</a></li>
    <li><a href="#">SYSTEM</a></li>
    <li class="active">LOGS.TXT</li>
</ul>

<div class="t-pagination">
    <button class="t-page-btn">[ PREV ]</button>
    <button class="t-page-btn active">1</button>
    <button class="t-page-btn">2</button>
    <button class="t-page-btn">[ NEXT ]</button>
</div>

> 19. DATA TABLES

ID	FILE
01	data.sql

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

> 20. LIST GROUPS (CONTACTS)

STATION_BRAVO Sector 5

<div class="t-list-group">
    <a href="#" class="t-list-item active">
        <span class="t-led-dot t-led-green"></span>
        <span class="t-list-item-title">STATION_BRAVO</span>
        <span class="t-list-item-subtitle">Sector 5</span>
    </a>
</div>

> 21. CHAT BUBBLES

Incoming message

My message

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

> 22. BADGES & PROGRESS

PENDING CRITICAL

45%

<span class="t-badge warning">PENDING</span>
<span class="t-badge danger">CRITICAL</span>

<div class="t-progress-bg">
    <div class="t-progress-bar" style="width: 45%;">45%</div>
</div>

> 23. LED INDICATORS

OK WAIT FAIL

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

> 24. ALERTS & SPINNER

> SECURITY BREACH!

Status: PROCESSING

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

> 25. TAB SYSTEM

Main tab content.

<div class="t-tabs-wrapper">
    <div class="t-tabs-header">
        <button class="t-tab-btn active" onclick="Terminal.tab(this, 't1')">MAIN</button>
    </div>
    <div id="t1" class="t-tab-content active">Main tab content.</div>
</div>

> 26. ACCORDION & TOOLTIP

Classified content.

Hover over This Text.

<div class="t-accordion">
    <button class="t-accordion-btn" onclick="Terminal.accordion(this)">DIRECTORY</button>
    <div class="t-accordion-content">Classified content.</div>
</div>

<p>Hover over <span data-tooltip="Secret coordinates">This Text</span>.</p>

> 27. MODAL SYSTEM

<button class="t-btn" onclick="Terminal.modal.open('contohModal')">OPEN MODAL</button>

<!-- Place this structure at the bottom of the body -->
<div id="contohModal" class="t-modal">
    <div class="t-modal-content">
        <div class="t-card-header">> SYSTEM_ACCESS</div>
        <p>System is responding well.</p>
        <div class="mt-4 text-right">
            <button class="t-btn danger" onclick="Terminal.modal.close('contohModal')">CLOSE [X]</button>
        </div>
    </div>
</div>

> 28. NOTIFICATIONS (TOAST)

<button class="t-btn" onclick="Terminal.toast('Secure connection.', 'normal')">Normal</button>
<button class="t-btn" onclick="Terminal.toast('Process running...', 'warning')">Warning</button>
<button class="t-btn danger" onclick="Terminal.toast('Connection lost!', 'danger')">Danger</button>

> 29. BRANDING (ICON)

<!-- How to setup Favicon -->
<link rel="icon" type="image/svg+xml" href="terminal-icon.svg">

> 30. NEW EXTENSIONS (V1.3.0)

A. DROPDOWN MENU (.t-dropdown)

<div class="t-dropdown">
    <button class="t-btn t-dropdown-btn" onclick="Terminal.dropdown(this)">[ ACTION_MENU v ]</button>
    <div class="t-dropdown-menu">
        <a class="t-dropdown-item" onclick="Terminal.toast('Scanning...')">> SCAN_NODE</a>
        <a class="t-dropdown-item" onclick="Terminal.toast('Extracting...')">> EXTRACT_DATA</a>
        <a class="t-dropdown-item text-danger">> PURGE_SYSTEM</a>
    </div>
</div>

B. TOGGLE SWITCH (.t-switch)

> MAIN_RADAR_POWER

<div class="d-flex align-items-center gap-3">
    <label class="t-switch">
        <input type="checkbox" checked>
        <span class="t-switch-slider"></span>
    </label>
    <span class="text-muted">> MAIN_RADAR_POWER</span>
</div>

C. RANGE SLIDER (.t-range)

> FREQUENCY_CALIBRATOR (MHz)

<label class="t-form-label">> FREQUENCY_CALIBRATOR (MHz)</label>
<input type="range" min="1" max="100" value="50" class="t-range">

D. TREE VIEW (.t-tree)

sys_root
- kernel.bin
- config.ini
vault_data
- passwords.enc
- archives
  - log_2026.txt

<ul class="t-tree">
    <li>
        <span class="t-tree-folder" onclick="Terminal.treeToggle(this)">sys_root</span>
        <ul>
            <li><a href="#" class="t-tree-file">kernel.bin</a></li>
            <li><a href="#" class="t-tree-file">config.ini</a></li>
        </ul>
    </li>
    <li>
        <span class="t-tree-folder" onclick="Terminal.treeToggle(this)">vault_data</span>
        <ul>
            <li><a href="#" class="t-tree-file">passwords.enc</a></li>
            <li>
                <span class="t-tree-folder" onclick="Terminal.treeToggle(this)">archives</span>
                <ul>
                    <li><a href="#" class="t-tree-file">log_2026.txt</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

E. JS TYPEWRITER EFFECT

<div id="tw-demo" class="mb-3 text-warning font-bold" style="min-height: 25px;"></div>
<button class="t-btn t-btn-sm" onclick="Terminal.typewrite('tw-demo', '> INCOMING TRANSMISSION INTERCEPTED...', 50)">[ PLAY_EFFECT ]</button>

> 31. MEDIA & STATUS EXTENSIONS

A. CUSTOM FILE UPLOAD (.t-file-wrapper)

> SELECT_FILE

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

B. IMAGE LIGHTBOX (.t-lightbox)

<- Click this logo

<img src="image.jpg" onclick="Terminal.lightbox.open(this.src)">

C. EMPTY STATE (.t-empty-state)

📡 [ EMPTY RADAR. NO SIGNAL. ]

<div class="t-empty-state">
    <span class="t-empty-state-icon">📡</span>
    [ EMPTY RADAR. NO SIGNAL. ]
</div>

D. SKELETON LOADER (.t-skeleton)

<div class="t-skeleton"></div>
<div class="t-skeleton" style="width: 70%;"></div>