mirror of
https://github.com/letieu/terminal.css.git
synced 2026-03-15 02:04:30 -07:00
init
This commit is contained in:
letieu
25
.gitignore
vendored
Normal file
25
.gitignore
vendored
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
# Dependencies
|
||||||
|
node_modules/
|
||||||
|
|
||||||
|
# Build outputs
|
||||||
|
dist/
|
||||||
|
build/
|
||||||
|
|
||||||
|
# Editor files
|
||||||
|
.vscode/
|
||||||
|
.idea/
|
||||||
|
*.swp
|
||||||
|
*.swo
|
||||||
|
*~
|
||||||
|
|
||||||
|
# OS files
|
||||||
|
.DS_Store
|
||||||
|
Thumbs.db
|
||||||
|
|
||||||
|
# Logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
|
||||||
|
# Temporary files
|
||||||
|
*.tmp
|
||||||
|
.cache/
|
||||||
854
index.html
Normal file
854
index.html
Normal file
@@ -0,0 +1,854 @@
|
|||||||
|
<!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) -->
|
||||||
|
<link rel="stylesheet" href="./index.css" />
|
||||||
|
|
||||||
|
<!-- Tailwind for layout (optional) -->
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
|
||||||
|
<!-- terminal.css JavaScript -->
|
||||||
|
<script src="./index.js"></script>
|
||||||
|
</head>
|
||||||
|
<body class="min-h-screen p-8">
|
||||||
|
<!-- 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>
|
||||||
|
<div class="has-text-muted text-xs" style="opacity: 0.5">
|
||||||
|
v0.0.1
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
<a class="button is-ghost" href="">GitHub</a>
|
||||||
|
</div>
|
||||||
|
<hr class="mt-6" />
|
||||||
|
</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">
|
||||||
|
<h4 class="has-text-muted text-sm mb-3">Title with Colors</h4>
|
||||||
|
<div class="space-y-3">
|
||||||
|
<h3 class="title is-4 has-text-primary">Primary Title</h3>
|
||||||
|
<h3 class="title is-4 has-text-danger">Danger Title</h3>
|
||||||
|
<h3 class="title is-4 has-text-success">Success Title</h3>
|
||||||
|
<h3 class="title is-4 has-text-warning">Warning Title</h3>
|
||||||
|
<h3 class="title is-4 has-text-info">Info Title</h3>
|
||||||
|
<h3 class="title is-4 has-text-muted">Muted Title</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Subtitle Colors -->
|
||||||
|
<div class="mt-6">
|
||||||
|
<h4 class="has-text-muted text-sm mb-3">Subtitle with Colors</h4>
|
||||||
|
<div class="space-y-2">
|
||||||
|
<p class="subtitle is-5 has-text-primary">
|
||||||
|
Primary description text
|
||||||
|
</p>
|
||||||
|
<p class="subtitle is-5 has-text-danger">
|
||||||
|
Danger description text
|
||||||
|
</p>
|
||||||
|
<p class="subtitle is-5 has-text-success">
|
||||||
|
Success description text
|
||||||
|
</p>
|
||||||
|
<p class="subtitle is-5 has-text-warning">
|
||||||
|
Warning description text
|
||||||
|
</p>
|
||||||
|
<p class="subtitle is-5 has-text-info">Info description text</p>
|
||||||
|
</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>
|
||||||
|
<div class="progress">
|
||||||
|
<div class="progress-bar" style="width: 75%"></div>
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
<div class="progress">
|
||||||
|
<div
|
||||||
|
class="progress-bar"
|
||||||
|
style="width: 88%; background: var(--warning)"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
</html>
|
||||||
78
index.js
Normal file
78
index.js
Normal file
@@ -0,0 +1,78 @@
|
|||||||
|
/**
|
||||||
|
* terminal.css - Terminal CSS Component Library
|
||||||
|
* JavaScript Utilities
|
||||||
|
* Version: 3.0.0
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Toggle FAQ item
|
||||||
|
* @param {HTMLElement} element - The FAQ question element that was clicked
|
||||||
|
*/
|
||||||
|
function toggleFaq(element) {
|
||||||
|
const faqItem = element.parentElement;
|
||||||
|
const wasActive = faqItem.classList.contains('is-active');
|
||||||
|
|
||||||
|
// Close all FAQ items
|
||||||
|
document.querySelectorAll('.faq-item').forEach(item => {
|
||||||
|
item.classList.remove('is-active');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Open clicked item if it wasn't active
|
||||||
|
if (!wasActive) {
|
||||||
|
faqItem.classList.add('is-active');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show a toast notification
|
||||||
|
* @param {string} type - Toast type: 'primary', 'success', 'danger', 'warning', 'info'
|
||||||
|
* @param {string} title - Toast title
|
||||||
|
* @param {string} message - Toast message
|
||||||
|
* @param {number} duration - Duration in milliseconds (default: 5000)
|
||||||
|
*/
|
||||||
|
function showToast(type, title, message, duration = 5000) {
|
||||||
|
const container = document.getElementById('toastContainer');
|
||||||
|
|
||||||
|
// Create toast element
|
||||||
|
const toast = document.createElement('div');
|
||||||
|
toast.className = `toast is-${type}`;
|
||||||
|
|
||||||
|
// Icon mapping
|
||||||
|
const icons = {
|
||||||
|
primary: '▸',
|
||||||
|
success: '✓',
|
||||||
|
danger: '✕',
|
||||||
|
warning: '⚠',
|
||||||
|
info: 'ℹ'
|
||||||
|
};
|
||||||
|
|
||||||
|
toast.innerHTML = `
|
||||||
|
<div class="toast-icon">${icons[type] || '▸'}</div>
|
||||||
|
<div class="toast-content">
|
||||||
|
<div class="toast-title">${title}</div>
|
||||||
|
<div class="toast-message">${message}</div>
|
||||||
|
</div>
|
||||||
|
<button class="toast-close" onclick="dismissToast(this)">×</button>
|
||||||
|
`;
|
||||||
|
|
||||||
|
container.appendChild(toast);
|
||||||
|
|
||||||
|
// Auto dismiss after duration
|
||||||
|
setTimeout(() => {
|
||||||
|
dismissToast(toast.querySelector('.toast-close'));
|
||||||
|
}, duration);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Dismiss a toast notification
|
||||||
|
* @param {HTMLElement} closeButton - The close button element that was clicked
|
||||||
|
*/
|
||||||
|
function dismissToast(closeButton) {
|
||||||
|
const toast = closeButton.closest('.toast');
|
||||||
|
toast.classList.add('is-dismissing');
|
||||||
|
|
||||||
|
// Remove from DOM after animation
|
||||||
|
setTimeout(() => {
|
||||||
|
toast.remove();
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
403
installation.html
Normal file
403
installation.html
Normal file
@@ -0,0 +1,403 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Installation - terminal.css</title>
|
||||||
|
|
||||||
|
<!-- terminal.css Components (Bulma-style) -->
|
||||||
|
<link rel="stylesheet" href="./index.css" />
|
||||||
|
|
||||||
|
<!-- Tailwind for layout (optional) -->
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
|
||||||
|
<!-- terminal.css JavaScript -->
|
||||||
|
<script src="./index.js"></script>
|
||||||
|
</head>
|
||||||
|
<body class="min-h-screen p-8">
|
||||||
|
<!-- 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:~/tcss/installation
|
||||||
|
</div>
|
||||||
|
<div class="has-text-muted text-xs" style="opacity: 0.5">
|
||||||
|
v3.0.0-bulma
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- BODY -->
|
||||||
|
<div class="terminal-body">
|
||||||
|
<!-- INTRO -->
|
||||||
|
<div class="mb-8">
|
||||||
|
<h1 class="title is-1 has-terminal-glow">Installation Guide</h1>
|
||||||
|
<p class="subtitle is-4">
|
||||||
|
Get started with terminal.css in your project
|
||||||
|
</p>
|
||||||
|
<hr />
|
||||||
|
<div class="mt-4">
|
||||||
|
<a
|
||||||
|
href="./index.html"
|
||||||
|
class="has-text-primary"
|
||||||
|
style="text-decoration: none"
|
||||||
|
>← Back to Components</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- SECTION 1: INSTALLATION -->
|
||||||
|
<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">CDN Installation</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="space-y-4">
|
||||||
|
<p class="has-text-muted">Add these links to your HTML file:</p>
|
||||||
|
|
||||||
|
<div class="terminal-log">
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message has-text-muted"
|
||||||
|
><!-- In your <head> section --></span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message"
|
||||||
|
><link rel="stylesheet" href="[CDN_LINK_HERE]" /></span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message"> </span>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message has-text-muted"
|
||||||
|
><!-- Before closing </body> tag --></span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message has-text-muted"
|
||||||
|
><!-- [Optional: Only for toast, FAQ component]
|
||||||
|
--></span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message"
|
||||||
|
><script src="[CDN_LINK_HERE]"></script></span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="has-text-muted text-sm mt-4">
|
||||||
|
Optional: Add Tailwind CSS for layout utilities (flex, grid,
|
||||||
|
spacing)
|
||||||
|
</p>
|
||||||
|
<div class="terminal-log">
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message"
|
||||||
|
><script
|
||||||
|
src="https://cdn.tailwindcss.com"></script></span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- SECTION 2: HOW TO USE -->
|
||||||
|
<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">How to Use Components</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="space-y-6">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-content">
|
||||||
|
<p class="has-text-muted text-sm mb-4">
|
||||||
|
To use any component, simply:
|
||||||
|
</p>
|
||||||
|
<ol
|
||||||
|
class="content"
|
||||||
|
style="list-style: decimal; padding-left: 1.5rem"
|
||||||
|
>
|
||||||
|
<li class="mb-2">
|
||||||
|
Go to the
|
||||||
|
<a href="./index.html" class="has-text-primary"
|
||||||
|
>Components page</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li class="mb-2">Find the component you want to use</li>
|
||||||
|
<li class="mb-2">Press <kbd>F12</kbd> to open DevTools</li>
|
||||||
|
<li class="mb-2">
|
||||||
|
Inspect the component and copy the HTML code
|
||||||
|
</li>
|
||||||
|
<li>Paste it into your project</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h4 class="has-text-muted text-sm mb-3">
|
||||||
|
Complete HTML Template
|
||||||
|
</h4>
|
||||||
|
<div class="terminal-log">
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message"
|
||||||
|
><!DOCTYPE html></span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message"
|
||||||
|
><html lang="en"></span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message"><head></span>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message">
|
||||||
|
<meta charset="UTF-8"></span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message">
|
||||||
|
<meta name="viewport" content="width=device-width,
|
||||||
|
initial-scale=1.0"></span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message">
|
||||||
|
<title>My Terminal App</title></span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message"> </span>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message has-text-muted">
|
||||||
|
<!-- terminal.css Stylesheet --></span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message">
|
||||||
|
<link rel="stylesheet" href="[CDN_LINK_HERE]"></span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message"> </span>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message has-text-muted">
|
||||||
|
<!-- Optional: Tailwind for layout utilities --></span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message">
|
||||||
|
<script
|
||||||
|
src="https://cdn.tailwindcss.com"></script></span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message"></head></span>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message"><body></span>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message">
|
||||||
|
<h1 class="title is-1 has-text-primary">Hello
|
||||||
|
Terminal!</h1></span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message">
|
||||||
|
<button class="button is-primary">Click
|
||||||
|
Me</button></span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message"> </span>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message has-text-muted">
|
||||||
|
<!-- terminal.css JavaScript --></span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message">
|
||||||
|
<script src="[CDN_LINK_HERE]"></script></span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message"></body></span>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message"></html></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- SECTION 3: CUSTOMIZATION -->
|
||||||
|
<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">Customization</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="space-y-4">
|
||||||
|
<p class="has-text-muted">
|
||||||
|
Override CSS variables to customize the theme:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="terminal-log">
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message has-text-muted"
|
||||||
|
>/* In your custom stylesheet */</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message has-text-warning">:root</span>
|
||||||
|
<span class="terminal-log-message"> {</span>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message"> </span>
|
||||||
|
<span class="terminal-log-message has-text-muted"
|
||||||
|
>/* Change primary color */</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message"> --primary: </span>
|
||||||
|
<span class="terminal-log-message has-text-success"
|
||||||
|
>#00ff00</span
|
||||||
|
>
|
||||||
|
<span class="terminal-log-message">;</span>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message"> </span>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message"> </span>
|
||||||
|
<span class="terminal-log-message has-text-muted"
|
||||||
|
>/* Change background */</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message"> --terminal-bg: </span>
|
||||||
|
<span class="terminal-log-message has-text-success"
|
||||||
|
>#0a0a0a</span
|
||||||
|
>
|
||||||
|
<span class="terminal-log-message">;</span>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message"> </span>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message"> </span>
|
||||||
|
<span class="terminal-log-message has-text-muted"
|
||||||
|
>/* Change font */</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message"> font-family: </span>
|
||||||
|
<span class="terminal-log-message has-text-success"
|
||||||
|
>'Courier New'</span
|
||||||
|
>
|
||||||
|
<span class="terminal-log-message">, monospace;</span>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message"> </span>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message"> </span>
|
||||||
|
<span class="terminal-log-message has-text-muted"
|
||||||
|
>/* Other variables */</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message"> --terminal-fg: </span>
|
||||||
|
<span class="terminal-log-message has-text-success"
|
||||||
|
>#f0f0f0</span
|
||||||
|
>
|
||||||
|
<span class="terminal-log-message">;</span>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message"> --danger: </span>
|
||||||
|
<span class="terminal-log-message has-text-success"
|
||||||
|
>#ff5555</span
|
||||||
|
>
|
||||||
|
<span class="terminal-log-message">;</span>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message"> --success: </span>
|
||||||
|
<span class="terminal-log-message has-text-success"
|
||||||
|
>#50fa7b</span
|
||||||
|
>
|
||||||
|
<span class="terminal-log-message">;</span>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message"> --warning: </span>
|
||||||
|
<span class="terminal-log-message has-text-success"
|
||||||
|
>#f1fa8c</span
|
||||||
|
>
|
||||||
|
<span class="terminal-log-message">;</span>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message"> --info: </span>
|
||||||
|
<span class="terminal-log-message has-text-success"
|
||||||
|
>#8be9fd</span
|
||||||
|
>
|
||||||
|
<span class="terminal-log-message">;</span>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message"> --border-color: </span>
|
||||||
|
<span class="terminal-log-message has-text-success"
|
||||||
|
>#333333</span
|
||||||
|
>
|
||||||
|
<span class="terminal-log-message">;</span>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message"> --surface: </span>
|
||||||
|
<span class="terminal-log-message has-text-success"
|
||||||
|
>#1a1a1a</span
|
||||||
|
>
|
||||||
|
<span class="terminal-log-message">;</span>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message"> --muted: </span>
|
||||||
|
<span class="terminal-log-message has-text-success"
|
||||||
|
>#6c757d</span
|
||||||
|
>
|
||||||
|
<span class="terminal-log-message">;</span>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-log-line">
|
||||||
|
<span class="terminal-log-message">}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FOOTER -->
|
||||||
|
<div class="pt-12 mt-12 border-t border-gray-800">
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<a href="./index.html" class="button is-primary"
|
||||||
|
>View All Components</a
|
||||||
|
>
|
||||||
|
<span class="has-terminal-cursor has-text-primary text-sm"
|
||||||
|
>Ready to build...</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Toast Container -->
|
||||||
|
<div class="toast-container" id="toastContainer"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
342
showcase.html
Normal file
342
showcase.html
Normal file
@@ -0,0 +1,342 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>terminal.css - Component Showcase</title>
|
||||||
|
|
||||||
|
<!-- terminal.css Components (Bulma-style) -->
|
||||||
|
<link rel="stylesheet" href="./index.css" />
|
||||||
|
|
||||||
|
<!-- Tailwind for layout (optional) -->
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
|
||||||
|
<!-- terminal.css JavaScript -->
|
||||||
|
<script src="./index.js"></script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
.showcase-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
.showcase-section {
|
||||||
|
background: var(--terminal-bg);
|
||||||
|
border: 1px solid var(--terminal-border);
|
||||||
|
padding: 0.5rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.showcase-header {
|
||||||
|
background: var(--terminal-bg);
|
||||||
|
border-bottom: 2px solid var(--terminal-primary);
|
||||||
|
padding: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
@media (max-width: 1400px) {
|
||||||
|
.showcase-grid {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.showcase-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- HEADER -->
|
||||||
|
<div class="showcase-header">
|
||||||
|
<h1 class="title is-1 has-terminal-glow mb-4">
|
||||||
|
terminal.css Component Library
|
||||||
|
</h1>
|
||||||
|
<p class="subtitle is-4 mb-6">
|
||||||
|
Terminal-style components with Bulma naming conventions
|
||||||
|
</p>
|
||||||
|
<div class="flex gap-3 justify-center">
|
||||||
|
<a href="./index.html" class="button is-primary">Get Started</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- SHOWCASE GRID -->
|
||||||
|
<div class="showcase-grid">
|
||||||
|
<!-- BUTTONS -->
|
||||||
|
<div class="showcase-section">
|
||||||
|
<h3 class="title is-5 mb-4 has-text-primary">Buttons</h3>
|
||||||
|
<div class="flex flex-wrap gap-2">
|
||||||
|
<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-outlined">Outlined</button>
|
||||||
|
<button class="button is-ghost">Ghost</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- TAGS -->
|
||||||
|
<div class="showcase-section">
|
||||||
|
<h3 class="title is-5 mb-4 has-text-primary">Tags & Badges</h3>
|
||||||
|
<div class="flex flex-wrap gap-2">
|
||||||
|
<span class="tag is-primary">v3.0.0</span>
|
||||||
|
<span class="tag is-success">Active</span>
|
||||||
|
<span class="tag is-danger">Error</span>
|
||||||
|
<span class="tag is-warning">Beta</span>
|
||||||
|
<span class="tag is-info">New</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- FORMS -->
|
||||||
|
<div class="showcase-section">
|
||||||
|
<h3 class="title is-5 mb-4 has-text-primary">Forms</h3>
|
||||||
|
<div class="space-y-3">
|
||||||
|
<div class="control">
|
||||||
|
<span class="has-text-primary" style="padding: 0 8px">$</span>
|
||||||
|
<input type="text" class="input" placeholder="Enter username..." />
|
||||||
|
</div>
|
||||||
|
<div class="control">
|
||||||
|
<span class="has-text-success" style="padding: 0 8px">✓</span>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
class="input"
|
||||||
|
placeholder="email@example.com"
|
||||||
|
value="valid@email.com"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="control">
|
||||||
|
<select class="select">
|
||||||
|
<option>Select option...</option>
|
||||||
|
<option>Option 1</option>
|
||||||
|
<option>Option 2</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- TYPOGRAPHY -->
|
||||||
|
<div class="showcase-section">
|
||||||
|
<h3 class="title is-5 mb-4 has-text-primary">Typography</h3>
|
||||||
|
<h1 class="title is-3 mb-2">Terminal UI</h1>
|
||||||
|
<p class="subtitle is-6 mb-3">
|
||||||
|
Beautiful command-line inspired components
|
||||||
|
</p>
|
||||||
|
<p class="has-text-muted">Monospace fonts and retro aesthetics</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- PROGRESS -->
|
||||||
|
<div class="showcase-section">
|
||||||
|
<h3 class="title is-5 mb-4 has-text-primary">Progress</h3>
|
||||||
|
<div class="space-y-3">
|
||||||
|
<progress class="progress is-primary" value="75" max="100">
|
||||||
|
75%
|
||||||
|
</progress>
|
||||||
|
<progress class="progress is-success" value="100" max="100">
|
||||||
|
100%
|
||||||
|
</progress>
|
||||||
|
<progress class="progress is-danger" value="30" max="100">
|
||||||
|
30%
|
||||||
|
</progress>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- NAVIGATION -->
|
||||||
|
<div class="showcase-section">
|
||||||
|
<h3 class="title is-5 mb-4 has-text-primary">Tabs</h3>
|
||||||
|
<div class="tabs">
|
||||||
|
<ul>
|
||||||
|
<li class="is-active"><a>Dashboard</a></li>
|
||||||
|
<li><a>Settings</a></li>
|
||||||
|
<li><a>Logs</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- TERMINAL LOG -->
|
||||||
|
<div class="showcase-section">
|
||||||
|
<h3 class="title is-5 mb-4 has-text-primary">Terminal Log</h3>
|
||||||
|
<div class="terminal-log">
|
||||||
|
<div class="log-line has-text-success">✓ Build successful</div>
|
||||||
|
<div class="log-line has-text-info">→ Starting server...</div>
|
||||||
|
<div class="log-line has-text-warning">
|
||||||
|
⚠ Warning: deprecated API
|
||||||
|
</div>
|
||||||
|
<div class="log-line has-text-danger">✗ Connection failed</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- CARD -->
|
||||||
|
<div class="showcase-section">
|
||||||
|
<h3 class="title is-5 mb-4 has-text-primary">Card</h3>
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<p class="card-header-title">System Status</p>
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<p class="has-text-success mb-2">● CPU: 45%</p>
|
||||||
|
<p class="has-text-warning mb-2">● Memory: 78%</p>
|
||||||
|
<p class="has-text-info">● Disk: 62%</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- TABLE -->
|
||||||
|
<div class="showcase-section">
|
||||||
|
<h3 class="title is-5 mb-4 has-text-primary">Table</h3>
|
||||||
|
<table class="table is-bordered is-striped">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Process</th>
|
||||||
|
<th>Status</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>nginx</td>
|
||||||
|
<td><span class="tag is-success">Running</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>mysql</td>
|
||||||
|
<td><span class="tag is-warning">Starting</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>redis</td>
|
||||||
|
<td><span class="tag is-danger">Stopped</span></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- BREADCRUMB -->
|
||||||
|
<div class="showcase-section">
|
||||||
|
<h3 class="title is-5 mb-4 has-text-primary">Breadcrumb</h3>
|
||||||
|
<ul class="breadcrumb">
|
||||||
|
<li><a>Home</a></li>
|
||||||
|
<li><a>Projects</a></li>
|
||||||
|
<li class="is-active"><a>terminal.css</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- MENU -->
|
||||||
|
<div class="showcase-section">
|
||||||
|
<h3 class="title is-5 mb-4 has-text-primary">Menu</h3>
|
||||||
|
<aside class="menu">
|
||||||
|
<p class="menu-label">Navigation</p>
|
||||||
|
<ul class="menu-list">
|
||||||
|
<li><a class="is-active">Dashboard</a></li>
|
||||||
|
<li><a>Components</a></li>
|
||||||
|
<li><a>Settings</a></li>
|
||||||
|
</ul>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- LIST -->
|
||||||
|
<div class="showcase-section">
|
||||||
|
<h3 class="title is-5 mb-4 has-text-primary">Lists</h3>
|
||||||
|
<ul class="list">
|
||||||
|
<li class="list-item">
|
||||||
|
<span class="list-item-icon">▸</span>
|
||||||
|
<span class="list-item-content">Initialize system</span>
|
||||||
|
</li>
|
||||||
|
<li class="list-item is-active">
|
||||||
|
<span class="list-item-icon">▸</span>
|
||||||
|
<span class="list-item-content">Load configuration</span>
|
||||||
|
</li>
|
||||||
|
<li class="list-item">
|
||||||
|
<span class="list-item-icon">▸</span>
|
||||||
|
<span class="list-item-content">Start services</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- NOTIFICATIONS / TOAST -->
|
||||||
|
<div class="showcase-section">
|
||||||
|
<h3 class="title is-5 mb-4 has-text-primary">Notifications</h3>
|
||||||
|
<div class="space-y-2">
|
||||||
|
<div class="toast is-success">
|
||||||
|
<strong>Success!</strong> Your changes were saved.
|
||||||
|
</div>
|
||||||
|
<div class="toast is-danger">
|
||||||
|
<strong>Error!</strong> Something went wrong.
|
||||||
|
</div>
|
||||||
|
<div class="toast is-info">
|
||||||
|
<strong>Info:</strong> New update available.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- FAQ / ACCORDION -->
|
||||||
|
<div class="showcase-section">
|
||||||
|
<h3 class="title is-5 mb-4 has-text-primary">FAQ</h3>
|
||||||
|
<div class="faq-item">
|
||||||
|
<div class="faq-question" onclick="toggleFaq(this)">
|
||||||
|
What is terminal.css?
|
||||||
|
</div>
|
||||||
|
<div class="faq-answer">A terminal-style CSS component library</div>
|
||||||
|
</div>
|
||||||
|
<div class="faq-item">
|
||||||
|
<div class="faq-question" onclick="toggleFaq(this)">
|
||||||
|
How to install?
|
||||||
|
</div>
|
||||||
|
<div class="faq-answer">Use CDN or download the CSS/JS files</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- DROPDOWN -->
|
||||||
|
<div class="showcase-section">
|
||||||
|
<h3 class="title is-5 mb-4 has-text-primary">Dropdown</h3>
|
||||||
|
<div class="dropdown">
|
||||||
|
<div class="dropdown-trigger">
|
||||||
|
<button class="button">
|
||||||
|
<span>Options</span>
|
||||||
|
<span>▼</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="dropdown-menu">
|
||||||
|
<div class="dropdown-content">
|
||||||
|
<a class="dropdown-item">Settings</a>
|
||||||
|
<a class="dropdown-item">Profile</a>
|
||||||
|
<hr class="dropdown-divider" />
|
||||||
|
<a class="dropdown-item">Logout</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- KBD ELEMENT -->
|
||||||
|
<div class="showcase-section">
|
||||||
|
<h3 class="title is-5 mb-4 has-text-primary">Keyboard</h3>
|
||||||
|
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy</p>
|
||||||
|
<p class="mt-2">Use <kbd>Esc</kbd> to exit</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- TEXT COLORS -->
|
||||||
|
<div class="showcase-section">
|
||||||
|
<h3 class="title is-5 mb-4 has-text-primary">Text Colors</h3>
|
||||||
|
<div class="space-y-2">
|
||||||
|
<p class="has-text-primary">Primary text</p>
|
||||||
|
<p class="has-text-success">Success message</p>
|
||||||
|
<p class="has-text-danger">Error message</p>
|
||||||
|
<p class="has-text-warning">Warning text</p>
|
||||||
|
<p class="has-text-info">Info text</p>
|
||||||
|
<p class="has-text-muted">Muted text</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- UTILITIES -->
|
||||||
|
<div class="showcase-section">
|
||||||
|
<h3 class="title is-5 mb-4 has-text-primary">Effects</h3>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
57
template.html
Normal file
57
template.html
Normal file
@@ -0,0 +1,57 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>My Terminal App</title>
|
||||||
|
|
||||||
|
<!-- terminal.css Stylesheet -->
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/YOUR_USERNAME/tcss@main/index.css">
|
||||||
|
|
||||||
|
<!-- Optional: Tailwind for layout utilities -->
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Terminal Container -->
|
||||||
|
<div class="terminal max-w-4xl mx-auto mt-8">
|
||||||
|
<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">terminal@localhost</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="terminal-body">
|
||||||
|
<h1 class="title is-1 has-text-primary has-terminal-glow">Hello Terminal!</h1>
|
||||||
|
<p class="subtitle is-4">Start building your terminal-style interface</p>
|
||||||
|
|
||||||
|
<hr class="my-6">
|
||||||
|
|
||||||
|
<div class="space-y-4">
|
||||||
|
<button class="button is-primary">Primary Button</button>
|
||||||
|
<button class="button is-success">Success Button</button>
|
||||||
|
<button class="button is-danger">Danger Button</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="my-6">
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h4 class="card-header-title">System Status</h4>
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<p class="has-text-success">All systems operational</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Toast Container (required for toast notifications) -->
|
||||||
|
<div class="toast-container" id="toastContainer"></div>
|
||||||
|
|
||||||
|
<!-- terminal.css JavaScript -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/YOUR_USERNAME/tcss@main/index.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user