Ark/terminal.css
1
0
Fork 0
mirror of https://github.com/letieu/terminal.css.git synced 2026-03-15 02:04:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

update showcase, effect

Browse Source
This commit is contained in:
letieu
2025-12-09 01:22:07 +07:00
parent 49d4ffc1ba
commit ca6a6d6621
3 changed files with 84 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
index.html
View File

@@ -25,9 +25,7 @@
<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 class="has-text-muted text-xs" style="opacity: 0.5">v0.0.1</div>
</div>
<!-- BODY -->
@@ -87,37 +85,27 @@
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>
<h4 class="has-text-muted text-sm mb-3">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>
<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>
</div>
</div>
<!-- Subtitle Colors -->
<!-- Effects -->
<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>
<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>
</div>
</div>
</section>
@@ -551,21 +539,44 @@
<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>
<progress
class="progress is-primary"
value="75"
max="100"
></progress>
</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>
<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>
</div>
<progress
class="progress is-danger"
value="30"
max="100"
></progress>
</div>
</div>