From ca6a6d6621afbd1cafc222043761d0a224dac8c3 Mon Sep 17 00:00:00 2001
From: letieu <letieu8@gmail.com>
Date: Tue, 9 Dec 2025 01:22:07 +0700
Subject: [PATCH] update showcase, effect

---
 index.css     | 30 ++++++++++++++++---
 index.html    | 81 +++++++++++++++++++++++++++++----------------------
 showcase.html | 18 ++++++++----
 3 files changed, 84 insertions(+), 45 deletions(-)

diff --git a/index.css b/index.css
index 36dbe13..dc966e0 100644
--- a/index.css
+++ b/index.css
@@ -52,7 +52,12 @@ body {
   color: var(--terminal-black);
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   margin: 0;
   font-weight: bold;
   line-height: 1.2;
@@ -841,18 +846,34 @@ ol.content li::before {
   background: var(--primary);
 }
 
+.progress.is-primary::-moz-progress-bar {
+  background: var(--primary);
+}
+
 .progress.is-danger::-webkit-progress-value {
   background: var(--danger);
 }
 
+.progress.is-danger::-moz-progress-bar {
+  background: var(--danger);
+}
+
 .progress.is-success::-webkit-progress-value {
   background: var(--success);
 }
 
+.progress.is-success::-moz-progress-bar {
+  background: var(--success);
+}
+
 .progress.is-warning::-webkit-progress-value {
   background: var(--warning);
 }
 
+.progress.is-warning::-moz-progress-bar {
+  background: var(--warning);
+}
+
 /* Progress bar alternative (for divs) */
 .progress-bar {
   height: 100%;
@@ -1175,10 +1196,12 @@ ol.content li::before {
 }
 
 @keyframes cursor-blink {
-  0%, 50% {
+  0%,
+  50% {
     opacity: 1;
   }
-  51%, 100% {
+  51%,
+  100% {
     opacity: 0;
   }
 }
@@ -1198,4 +1221,3 @@ kbd {
   padding: 2px 6px;
   white-space: nowrap;
 }
-
diff --git a/index.html b/index.html
index 20f7d9f..1b37e22 100644
--- a/index.html
+++ b/index.html
@@ -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>
 
diff --git a/showcase.html b/showcase.html
index 7697dc4..70c391b 100644
--- a/showcase.html
+++ b/showcase.html
@@ -74,8 +74,8 @@
           <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>
+          <button class="button is-info">Info</button>
+          <button class="button is-info is-loading">Loading</button>
         </div>
       </div>
 
@@ -85,9 +85,11 @@
         <div class="flex flex-wrap gap-2">
           <span class="tag is-primary">v0.0.1</span>
           <span class="tag is-success">Active</span>
+          <span class="tag is-danger is-active">Error</span>
+          <span class="tag is-warning is-active">Beta</span>
+          <span class="tag is-info">New</span>
           <span class="tag is-danger">Error</span>
           <span class="tag is-warning">Beta</span>
-          <span class="tag is-info">New</span>
         </div>
       </div>
 
@@ -132,15 +134,19 @@
       <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>
+          <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-success" value="100" max="100">
             100%
           </progress>
           <progress class="progress is-danger" value="30" max="100">
             30%
           </progress>
+          <progress class="progress is-primary" value="75" max="100">
+            75%
+          </progress>
         </div>
       </div>