2025-12-09 00:47:23 +07:00
<!doctype html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" / >
< title > terminal.css - Terminal CSS Component Library< / title >
<!-- terminal.css Components (Bulma - style) -->
2025-12-10 05:09:31 +07:00
< link
rel="stylesheet"
2025-12-10 05:10:52 +07:00
href="https://cdn.jsdelivr.net/gh/letieu/terminal.css@v0.0.3/index.css"
2025-12-10 05:09:31 +07:00
/>
2025-12-09 00:47:23 +07:00
<!-- Tailwind for layout (optional) -->
< script src = "https://cdn.tailwindcss.com" > < / script >
<!-- terminal.css JavaScript -->
2025-12-10 05:10:52 +07:00
< script src = "https://cdn.jsdelivr.net/gh/letieu/terminal.css@v0.0.3/index.js" > < / script >
2025-12-09 00:47:23 +07:00
< / head >
2025-12-09 10:39:52 +07:00
< body class = "min-h-screen p-0 md:p-8" >
2025-12-09 00:47:23 +07:00
<!-- MAIN TERMINAL WINDOW -->
< div class = "terminal max-w-6xl mx-auto mb-20" >
<!-- HEADER -->
< div class = "terminal-header" >
< div class = "flex gap-2" >
< div class = "w-3 h-3 rounded-full bg-red-500" > < / div >
< div class = "w-3 h-3 rounded-full bg-yellow-500" > < / div >
< div class = "w-3 h-3 rounded-full bg-green-500" > < / div >
< / div >
< div class = "has-text-muted text-sm font-bold" > dev@localhost:~/< / div >
2025-12-10 05:10:52 +07:00
< div class = "has-text-muted text-xs" style = "opacity: 0.5" > v0.0.3< / div >
2025-12-09 00:47:23 +07:00
< / div >
<!-- BODY -->
< div class = "terminal-body" >
<!-- INTRO -->
< div class = "mb-8" >
< h1 class = "title is-1 has-terminal-glow" > Terminal.css< / h1 >
< p class = "subtitle is-4" >
Terminal-style css components with Bulma naming conventions
< / p >
< div class = "mt-4" >
< a href = "./installation.html" class = "button is-primary"
>Installation Guide< /a
>
< a class = "button is-info" href = "./showcase.html" > Showcase< / a >
2025-12-10 05:09:31 +07:00
< a
class="button is-ghost"
href="https://github.com/letieu/terminal.css"
>GitHub< /a
>
2025-12-09 00:47:23 +07:00
< / div >
< hr class = "mt-6" / >
2025-12-10 05:09:31 +07:00
< div class = "mt-4 has-text-primary button" onclick = "copyAIPrompt()" >
Copy AI Prompt
< / div >
2025-12-09 00:47:23 +07:00
< / div >
<!-- SECTION 1: TYPOGRAPHY -->
< section class = "section" >
< div class = "flex items-center gap-2 mb-6" >
< span class = "has-text-primary text-xl font-bold" > 01.< / span >
< h2 class = "text-xl font-bold" > Typography< / h2 >
< / div >
< div class = "grid grid-cols-1 md:grid-cols-2 gap-8" >
<!-- Titles -->
< div class = "space-y-4" >
< h4 class = "has-text-muted text-sm mb-3" > Titles< / h4 >
< h1 class = "title is-1" > Title 1< / h1 >
< h2 class = "title is-2" > Title 2< / h2 >
< h3 class = "title is-3" > Title 3< / h3 >
< h4 class = "title is-4" > Title 4< / h4 >
< h5 class = "title is-5" > Title 5< / h5 >
< h6 class = "title is-6" > Title 6< / h6 >
< / div >
<!-- Subtitles -->
< div class = "space-y-4" >
< h4 class = "has-text-muted text-sm mb-3" > Subtitles< / h4 >
< p class = "subtitle is-1" > Subtitle 1< / p >
< p class = "subtitle is-2" > Subtitle 2< / p >
< p class = "subtitle is-3" > Subtitle 3< / p >
< p class = "subtitle is-4" > Subtitle 4< / p >
< p class = "subtitle is-5" > Subtitle 5< / p >
< p class = "subtitle is-6" > Subtitle 6< / p >
< / div >
< / div >
<!-- Combined Title + Subtitle -->
< div class = "mt-6" >
< h4 class = "has-text-muted text-sm mb-3" > Combined< / h4 >
< h1 class = "title is-3" > System Dashboard< / h1 >
< p class = "subtitle is-5" >
Monitoring and analytics for your terminal
< / p >
< / div >
<!-- Title Colors -->
< div class = "mt-6" >
2025-12-09 01:22:07 +07:00
< h4 class = "has-text-muted text-sm mb-3" > Colors< / h4 >
2025-12-09 00:47:23 +07:00
< div class = "space-y-3" >
2025-12-09 01:22:07 +07:00
< h3 class = "has-text-primary" > Primary Title< / h3 >
< h3 class = "has-text-danger" > Danger Title< / h3 >
< h3 class = "has-text-success" > Success Title< / h3 >
< h3 class = "has-text-warning" > Warning Title< / h3 >
< h3 class = "has-text-info" > Info Title< / h3 >
< h3 class = "has-text-muted" > Muted Title< / h3 >
2025-12-09 00:47:23 +07:00
< / div >
< / div >
2025-12-09 01:22:07 +07:00
<!-- Effects -->
2025-12-09 00:47:23 +07:00
< div class = "mt-6" >
2025-12-09 01:22:07 +07:00
< h4 class = "has-text-muted text-sm mb-3" > Effects< / h4 >
< div class = "space-y-3" >
< p class = "has-terminal-glow" > Terminal glow effect< / p >
< p class = "has-terminal-cursor" > Blinking cursor< / p >
< hr / >
< p class = "has-text-muted text-sm" > Divider separator< / p >
2025-12-09 00:47:23 +07:00
< / div >
< / div >
< / section >
<!-- SECTION 02: LISTS -->
< section class = "section" >
< div class = "flex items-center gap-2 mb-6" >
< span class = "has-text-primary text-xl font-bold" > 02.< / span >
< h2 class = "text-xl font-bold" > Lists< / h2 >
< / div >
< div class = "grid grid-cols-1 md:grid-cols-2 gap-8" >
<!-- Simple List -->
< div >
< h4 class = "has-text-muted text-sm mb-3" > Simple List< / h4 >
< ul class = "list" >
< li class = "list-item" >
< span class = "list-item-icon" > ▸< / span >
< span class = "list-item-content" > First item< / span >
< / li >
< li class = "list-item is-active" >
< span class = "list-item-icon" > ▸< / span >
< span class = "list-item-content" > Active item< / span >
< / li >
< li class = "list-item" >
< span class = "list-item-icon" > ▸< / span >
< span class = "list-item-content" > Third item< / span >
< / li >
< / ul >
< / div >
<!-- List with Details -->
< div >
< h4 class = "has-text-muted text-sm mb-3" > List with Details< / h4 >
< ul class = "list" >
< li class = "list-item" >
< span class = "list-item-icon" > 📄< / span >
< div class = "list-item-content" >
< div class = "list-item-title" > config.json< / div >
< div class = "list-item-description" > Configuration file< / div >
< / div >
< div class = "list-item-meta" > 2.4 KB< / div >
< / li >
< li class = "list-item is-active" >
< span class = "list-item-icon" > 📁< / span >
< div class = "list-item-content" >
< div class = "list-item-title" > src/< / div >
< div class = "list-item-description" > Source directory< / div >
< / div >
< div class = "list-item-meta" > 12 items< / div >
< / li >
< li class = "list-item" >
< span class = "list-item-icon" > 📄< / span >
< div class = "list-item-content" >
< div class = "list-item-title" > README.md< / div >
< div class = "list-item-description" > Documentation< / div >
< / div >
< div class = "list-item-meta" > 4.2 KB< / div >
< / li >
< / ul >
< / div >
< / div >
<!-- Content Lists -->
< div class = "grid grid-cols-1 md:grid-cols-2 gap-8 mt-8" >
< div >
< h4 class = "has-text-muted text-sm mb-3" > Unordered List< / h4 >
< ul class = "content" >
< li > First item in list< / li >
< li > Second item with more text< / li >
< li > Third item< / li >
< li > Fourth item< / li >
< / ul >
< / div >
< div >
< h4 class = "has-text-muted text-sm mb-3" > Ordered List< / h4 >
< ol class = "content" >
< li > First step< / li >
< li > Second step< / li >
< li > Third step< / li >
< li > Final step< / li >
< / ol >
< / div >
< / div >
< / section >
<!-- SECTION 03: BUTTONS -->
< section class = "section" >
< div class = "flex items-center gap-2 mb-6" >
< span class = "has-text-primary text-xl font-bold" > 03.< / span >
< h2 class = "text-xl font-bold" > Buttons< / h2 >
< / div >
< div class = "space-y-6" >
<!-- Base Buttons -->
< div >
< h4 class = "has-text-muted text-sm mb-3" > Base Styles< / h4 >
< div class = "flex flex-wrap gap-4 items-center" >
< button class = "button" > Default< / button >
< button class = "button is-primary" > Primary< / button >
< button class = "button is-danger" > Danger< / button >
< button class = "button is-success" > Success< / button >
< button class = "button is-warning" > Warning< / button >
< button class = "button is-info" > Info< / button >
< / div >
< / div >
<!-- Disabled Button -->
< div >
< h4 class = "has-text-muted text-sm mb-3" > States< / h4 >
< div class = "flex flex-wrap gap-4 items-center" >
< button
class="button"
disabled
style="opacity: 0.5; cursor: not-allowed"
>
Disabled
< / button >
< button class = "button is-loading" > Loading< / button >
< / div >
< / div >
< / div >
< / section >
<!-- SECTION 04: TAGS -->
< section class = "section" >
< div class = "flex items-center gap-2 mb-6" >
< span class = "has-text-primary text-xl font-bold" > 04.< / span >
< h2 class = "text-xl font-bold" > Tags< / h2 >
< / div >
< div class = "space-y-6" >
<!-- Base Tags -->
< div >
< h4 class = "has-text-muted text-sm mb-3" > Base Styles< / h4 >
< div class = "flex flex-wrap gap-3" >
< span class = "tag" > Default< / span >
< span class = "tag is-primary" > Primary< / span >
< span class = "tag is-danger" > Danger< / span >
< span class = "tag is-success" > Success< / span >
< span class = "tag is-warning" > Warning< / span >
< span class = "tag is-info" > Info< / span >
< / div >
< / div >
<!-- Active Tags -->
< div >
< h4 class = "has-text-muted text-sm mb-3" > Active State< / h4 >
< div class = "flex flex-wrap gap-3" >
< span class = "tag is-active" > Active< / span >
< span class = "tag is-primary is-active" > Primary Active< / span >
< span class = "tag is-danger is-active" > Danger Active< / span >
< / div >
< / div >
< / div >
< / section >
<!-- SECTION 05: FORMS -->
< section class = "section" >
< div class = "flex items-center gap-2 mb-6" >
< span class = "has-text-primary text-xl font-bold" > 05.< / span >
< h2 class = "text-xl font-bold" > Forms< / h2 >
< / div >
< div class = "grid grid-cols-1 md:grid-cols-2 gap-8" >
< div class = "space-y-4" >
< div class = "field" >
< label class = "label" > Username:< / label >
< div class = "control" >
< span class = "has-text-primary" style = "padding: 0 8px" > $< / span >
< input
type="text"
class="input"
placeholder="Enter username..."
/>
< / div >
< / div >
< div class = "field" >
< label class = "label" > Password:< / label >
< div class = "control" >
< span class = "has-text-primary" style = "padding: 0 8px"
>🔒< /span
>
< input
type="password"
class="input"
placeholder="Enter password..."
/>
< / div >
< / div >
< / div >
< div class = "space-y-4" >
< div class = "field" >
< label class = "label" > Select Option:< / label >
< div class = "control" >
< select class = "select" >
< option > Default Option< / option >
< option > Option Alpha< / option >
< option > Option Beta< / option >
< / select >
< / div >
< / div >
< div class = "field" >
< label class = "label" > Message:< / label >
< div class = "control" style = "align-items: flex-start" >
< textarea
class="textarea"
rows="4"
placeholder="Enter message..."
style="resize: vertical"
>< / textarea >
< / div >
< / div >
< / div >
< / div >
< / section >
<!-- SECTION 06: CARDS -->
< section class = "section" >
< div class = "flex items-center gap-2 mb-6" >
< span class = "has-text-primary text-xl font-bold" > 06.< / span >
< h2 class = "text-xl font-bold" > Cards< / h2 >
< / div >
< div class = "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" >
<!-- Simple Card -->
< div class = "card" >
< div class = "card-content" >
< h4 class = "card-header-title" > Simple Card< / h4 >
< p class = "has-text-muted text-sm" > Card with content only.< / p >
< / div >
< / div >
<!-- Card with Header -->
< div class = "card" >
< div class = "card-header" >
< h4 class = "card-header-title" > Card Header< / h4 >
< / div >
< div class = "card-content" >
< p class = "has-text-muted text-sm" >
Card with header and content.
< / p >
< / div >
< / div >
<!-- Card with Footer -->
< div class = "card" >
< div class = "card-header" >
< h4 class = "card-header-title" > System Status< / h4 >
< / div >
< div class = "card-content" >
< div class = "space-y-2" >
< div class = "flex justify-between text-sm" >
< span class = "has-text-muted" > CPU< / span >
< span class = "has-text-success" > 12%< / span >
< / div >
< div class = "flex justify-between text-sm" >
< span class = "has-text-muted" > Memory< / span >
< span class = "has-text-warning" > 68%< / span >
< / div >
< div class = "flex justify-between text-sm" >
< span class = "has-text-muted" > Disk< / span >
< span class = "has-text-danger" > 92%< / span >
< / div >
< / div >
< / div >
< / div >
< / div >
< / section >
<!-- SECTION 07: TABLES -->
< section class = "section" >
< div class = "flex items-center gap-2 mb-6" >
< span class = "has-text-primary text-xl font-bold" > 07.< / span >
< h2 class = "text-xl font-bold" > Tables< / h2 >
< / div >
< div class = "card" style = "padding: 0; overflow: auto" >
< table class = "table" >
< thead >
< tr >
< th > PID< / th >
< th > Process< / th >
< th > Status< / th >
< th > CPU< / th >
< th > Memory< / th >
< / tr >
< / thead >
< tbody >
< tr class = "is-selected" >
< td > 1024< / td >
< td > nginx.service< / td >
< td class = "has-text-success" > RUNNING< / td >
< td > 2.4%< / td >
< td > 128MB< / td >
< / tr >
< tr >
< td > 2048< / td >
< td > postgres.service< / td >
< td class = "has-text-success" > RUNNING< / td >
< td > 12.8%< / td >
< td > 512MB< / td >
< / tr >
< tr >
< td > 4096< / td >
< td > redis.service< / td >
< td class = "has-text-warning" > IDLE< / td >
< td > 0.1%< / td >
< td > 64MB< / td >
< / tr >
< tr >
< td > 8192< / td >
< td > cron.service< / td >
< td class = "has-text-danger" > STOPPED< / td >
< td > 0.0%< / td >
< td > 8MB< / td >
< / tr >
< / tbody >
< / table >
< / div >
< / section >
<!-- SECTION 08: NAVIGATION -->
< section class = "section" >
< div class = "flex items-center gap-2 mb-6" >
< span class = "has-text-primary text-xl font-bold" > 08.< / span >
< h2 class = "text-xl font-bold" > Navigation< / h2 >
< / div >
< div class = "space-y-8" >
<!-- Navbar -->
< div >
< h4 class = "has-text-muted text-sm mb-3" > Navbar< / h4 >
< nav class = "navbar" >
< div class = "navbar-brand" > AppName< / div >
< ul class = "navbar-menu" >
< li >
< a href = "#" class = "navbar-item is-active" > Dashboard< / a >
< / li >
< li > < a href = "#" class = "navbar-item" > Projects< / a > < / li >
< li > < a href = "#" class = "navbar-item" > Settings< / a > < / li >
< / ul >
< / nav >
< / div >
<!-- Tabs -->
< div >
< h4 class = "has-text-muted text-sm mb-3" > Tabs< / h4 >
< ul class = "tabs" >
< li class = "is-active" > < a href = "#" > Overview< / a > < / li >
< li > < a href = "#" > Metrics< / a > < / li >
< li > < a href = "#" > Logs< / a > < / li >
< li > < a href = "#" > Settings< / a > < / li >
< / ul >
< div class = "card" >
< div class = "card-content" >
< p class = "has-text-muted text-sm" > Tab content goes here< / p >
< / div >
< / div >
< / div >
<!-- Breadcrumb -->
< div >
< h4 class = "has-text-muted text-sm mb-3" > Breadcrumb< / h4 >
< ul class = "breadcrumb" >
< li > < a href = "#" > Home< / a > < / li >
< li > < a href = "#" > Projects< / a > < / li >
< li class = "is-active" > Current Project< / li >
< / ul >
< / div >
<!-- Dropdown -->
< div >
< h4 class = "has-text-muted text-sm mb-3" >
Dropdown (hover to open)
< / h4 >
< div class = "dropdown" >
< button class = "dropdown-trigger" > Actions< / button >
< div class = "dropdown-menu" >
< div class = "dropdown-content" >
< a href = "#" class = "dropdown-item" > View Details< / a >
< a href = "#" class = "dropdown-item is-active" > Edit< / a >
< a href = "#" class = "dropdown-item" > Duplicate< / a >
< hr class = "dropdown-divider" / >
< a href = "#" class = "dropdown-item has-text-danger" > Delete< / a >
< / div >
< / div >
< / div >
< / div >
<!-- Menu/Sidebar -->
< div >
< h4 class = "has-text-muted text-sm mb-3" > Menu (Sidebar)< / h4 >
< div
class="flex"
style="height: 250px; border: 1px solid var(--border-color)"
>
< aside class = "menu" >
< ul class = "menu-list" >
< li > < a href = "#" class = "is-active" > Dashboard< / a > < / li >
< li > < a href = "#" > Projects< / a > < / li >
< li > < a href = "#" > Team< / a > < / li >
< li > < a href = "#" > Reports< / a > < / li >
< li > < a href = "#" > Settings< / a > < / li >
< / ul >
< / aside >
< div class = "flex-1 p-4" >
< h3 class = "text-lg font-bold has-text-primary mb-2" >
Main Content
< / h3 >
< p class = "has-text-muted text-sm" > Sidebar navigation demo< / p >
< / div >
< / div >
< / div >
< / div >
< / section >
<!-- SECTION 09: PROGRESS & LOADING -->
< section class = "section" >
< div class = "flex items-center gap-2 mb-6" >
< span class = "has-text-primary text-xl font-bold" > 09.< / span >
< h2 class = "text-xl font-bold" > Progress & Loading< / h2 >
< / div >
< div class = "space-y-6" >
< div class = "space-y-4" >
< div >
< div class = "flex justify-between mb-2" >
< span class = "has-text-muted text-sm" > Download Progress< / span >
< span class = "has-text-primary text-sm font-bold" > 75%< / span >
< / div >
2025-12-09 01:22:07 +07:00
< progress
class="progress is-primary"
value="75"
max="100"
>< / progress >
2025-12-09 00:47:23 +07:00
< / div >
< div >
< div class = "flex justify-between mb-2" >
< span class = "has-text-muted text-sm" > CPU Usage< / span >
< span class = "has-text-warning text-sm font-bold" > 88%< / span >
< / div >
2025-12-09 01:22:07 +07:00
< progress
class="progress is-warning"
value="88"
max="100"
>< / progress >
< / div >
< div >
< div class = "flex justify-between mb-2" >
< span class = "has-text-muted text-sm" > Upload< / span >
< span class = "has-text-success text-sm font-bold" > 100%< / span >
< / div >
< progress
class="progress is-success"
value="100"
max="100"
>< / progress >
< / div >
< div >
< div class = "flex justify-between mb-2" >
< span class = "has-text-muted text-sm" > Disk Usage< / span >
< span class = "has-text-danger text-sm font-bold" > 30%< / span >
2025-12-09 00:47:23 +07:00
< / div >
2025-12-09 01:22:07 +07:00
< progress
class="progress is-danger"
value="30"
max="100"
>< / progress >
2025-12-09 00:47:23 +07:00
< / div >
< / div >
< div >
< h4 class = "has-text-muted text-sm mb-3" > Loading Button< / h4 >
< button class = "button is-loading" > Loading< / button >
< / div >
< / div >
< / section >
<!-- SECTION 10: TERMINAL LOG -->
< section class = "section" >
< div class = "flex items-center gap-2 mb-6" >
< span class = "has-text-primary text-xl font-bold" > 10.< / span >
< h2 class = "text-xl font-bold" > Terminal Log< / h2 >
< / div >
< div class = "terminal-log" >
< div class = "terminal-log-line" >
< span class = "terminal-log-time" > 12:34:01< / span >
< span class = "terminal-log-level has-text-success" > [INFO]< / span >
< span class = "terminal-log-message"
>Server initialized successfully< /span
>
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-time" > 12:34:15< / span >
< span class = "terminal-log-level has-text-warning" > [WARN]< / span >
< span class = "terminal-log-message"
>High memory usage detected: 85%< /span
>
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-time" > 12:34:32< / span >
< span class = "terminal-log-level has-text-danger" > [ERROR]< / span >
< span class = "terminal-log-message"
>Connection timeout on port 8080< /span
>
< / div >
< div class = "terminal-log-line has-terminal-cursor" >
< span class = "terminal-log-time" > 12:35:45< / span >
< span class = "terminal-log-level has-text-success" > [INFO]< / span >
< span class = "terminal-log-message" > Connection restored< / span >
< / div >
< / div >
< / section >
<!-- SECTION 11: TOAST / NOTIFICATION -->
< section class = "section" >
< div class = "flex items-center gap-2 mb-6" >
< span class = "has-text-primary text-xl font-bold" > 11.< / span >
< h2 class = "text-xl font-bold" > Toast / Notification< / h2 >
< / div >
< div class = "space-y-6" >
< div >
< h4 class = "has-text-muted text-sm mb-3" > Toast Variants< / h4 >
< div class = "flex flex-wrap gap-3" >
< button
class="button is-primary"
onclick="showToast('primary', 'Primary', 'This is a primary notification')"
>
Primary Toast
< / button >
< button
class="button is-success"
onclick="showToast('success', 'Success', 'Operation completed successfully!')"
>
Success Toast
< / button >
< button
class="button is-danger"
onclick="showToast('danger', 'Error', 'Something went wrong!')"
>
Danger Toast
< / button >
< button
class="button is-warning"
onclick="showToast('warning', 'Warning', 'Please review this action')"
>
Warning Toast
< / button >
< button
class="button is-info"
onclick="showToast('info', 'Info', 'Here is some information')"
>
Info Toast
< / button >
< / div >
< / div >
<!-- Toast Examples (static for demo) -->
< div >
< h4 class = "has-text-muted text-sm mb-3" > Static Examples< / h4 >
< div class = "space-y-4" >
<!-- Success Toast -->
< div
class="toast is-success"
style="position: relative; top: auto; right: auto"
>
< div class = "toast-icon" > ✓< / div >
< div class = "toast-content" >
< div class = "toast-title" > Success< / div >
< div class = "toast-message" >
Your changes have been saved successfully.
< / div >
< / div >
< button class = "toast-close" > × < / button >
< / div >
<!-- Danger Toast -->
< div
class="toast is-danger"
style="position: relative; top: auto; right: auto"
>
< div class = "toast-icon" > ✕< / div >
< div class = "toast-content" >
< div class = "toast-title" > Error< / div >
< div class = "toast-message" >
Failed to connect to server. Please try again.
< / div >
< / div >
< button class = "toast-close" > × < / button >
< / div >
<!-- Warning Toast -->
< div
class="toast is-warning"
style="position: relative; top: auto; right: auto"
>
< div class = "toast-icon" > ⚠< / div >
< div class = "toast-content" >
< div class = "toast-title" > Warning< / div >
< div class = "toast-message" >
This action cannot be undone.
< / div >
< / div >
< button class = "toast-close" > × < / button >
< / div >
<!-- Info Toast -->
< div
class="toast is-info"
style="position: relative; top: auto; right: auto"
>
< div class = "toast-icon" > ℹ < / div >
< div class = "toast-content" >
< div class = "toast-title" > Info< / div >
< div class = "toast-message" > New updates are available.< / div >
< / div >
< button class = "toast-close" > × < / button >
< / div >
< / div >
< / div >
< / div >
< / section >
<!-- SECTION 12: FAQ / ACCORDION -->
< section class = "section" >
< div class = "flex items-center gap-2 mb-6" >
< span class = "has-text-primary text-xl font-bold" > 12.< / span >
< h2 class = "text-xl font-bold" > FAQ / Accordion< / h2 >
< / div >
< div class = "faq" >
< div class = "faq-item is-active" >
< div class = "faq-question" onclick = "toggleFaq(this)" >
< span > What is terminal.css?< / span >
< / div >
< div class = "faq-answer" >
< p >
terminal.css is a Terminal CSS Component Library that provides
terminal-style components with Bulma naming conventions. It's
designed for building retro/cyberpunk terminal-inspired
interfaces.
< / p >
< / div >
< / div >
< div class = "faq-item" >
< div class = "faq-question" onclick = "toggleFaq(this)" >
< span > How do I use color modifiers?< / span >
< / div >
< div class = "faq-answer" >
< p >
Use Bulma-style modifiers with the < code > is-*< / code > pattern
for components:
< / p >
< p >
< code
>< button class="button
is-primary"> Button< /button> < /code
>
< / p >
< p > For text colors, use < code > has-text-*< / code > utilities:< / p >
< p >
< code
>< p class="has-text-danger"> Error text< /p> < /code
>
< / p >
< / div >
< / div >
< div class = "faq-item" >
< div class = "faq-question" onclick = "toggleFaq(this)" >
< span > Do I need Tailwind CSS?< / span >
< / div >
< div class = "faq-answer" >
< p >
No! All components work standalone. Tailwind is optional and
only recommended for layout utilities like < code > grid< / code > ,
< code > flex< / code > , and < code > gap< / code > .
< / p >
< p >
terminal.css components have complete default styling and
don't require any external dependencies.
< / p >
< / div >
< / div >
< div class = "faq-item" >
< div class = "faq-question" onclick = "toggleFaq(this)" >
< span > Can I combine multiple modifiers?< / span >
< / div >
< div class = "faq-answer" >
< p > Yes! You can combine modifiers just like Bulma:< / p >
< p >
< code
>< button class="button is-primary
is-loading"> Submit< /button> < /code
>
< / p >
< p >
< code
>< span class="tag is-danger
is-active"> Error< /span> < /code
>
< / p >
< p >
< code
>< h1 class="title is-3
has-text-success"> Success!< /h1> < /code
>
< / p >
< / div >
< / div >
< div class = "faq-item" >
< div class = "faq-question" onclick = "toggleFaq(this)" >
< span > How do I customize colors?< / span >
< / div >
< div class = "faq-answer" >
< p > Override CSS variables in your own stylesheet:< / p >
< p >
< code > :root { --primary: #00ff00; --danger: #ff0000; }< / code >
< / p >
< / div >
< / div >
< div class = "faq-item" >
< div class = "faq-question" onclick = "toggleFaq(this)" >
< span > Is this library responsive?< / span >
< / div >
< div class = "faq-answer" >
< p >
Yes! All components are designed to work on different screen
sizes. Use Tailwind's responsive utilities for layout control.
< / p >
< / div >
< / div >
< / div >
< / section >
<!-- FOOTER -->
< div class = "pt-12 mt-12 border-t border-gray-800 text-right" >
< span class = "has-terminal-cursor has-text-primary text-sm"
>System Ready. Awaiting Input...< /span
>
< / div >
< / div >
< / div >
<!-- Toast Container -->
< div class = "toast-container" id = "toastContainer" > < / div >
< / body >
2025-12-10 05:09:31 +07:00
< script >
async function copyAIPrompt() {
const htmlText = document.querySelector("html").innerHTML;
const textToCopy = htmlText;
await navigator.clipboard.writeText(`
2025-12-10 05:25:08 +07:00
This is terminal-like css framework, this is full html example, please check and help me to build beautiful UI use this css framework, Please ask me again what I need to build first.
2025-12-10 05:09:31 +07:00
2025-12-10 05:25:08 +07:00
This is components sample:
2025-12-10 05:09:31 +07:00
${htmlText}
`);
showToast("primary", "Primary", "Copied the propmt");
}
< / script >
2025-12-09 00:47:23 +07:00
< / html >
