Update terminal styles.

Author: m0ver

assets/css/style.css

@@ -958,4 +958,65 @@ footer {
         padding: 2rem 4rem;
         /* More generous padding for desktop reading */
     }
+}
+
+/* Terminal Block */
+.terminal-wrapper {
+    padding: 0 3rem;
+    margin-bottom: 2rem;
+    max-width: 1400px;
+}
+
+.terminal {
+    font-family: 'Fira Code', 'Courier New', monospace;
+    background: #1e1e1e;
+    border-radius: 0.75rem;
+    padding: 1.5rem;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
+    font-size: 0.9rem;
+    line-height: 1.5;
+    overflow: hidden;
+    color: #00ff00;
+    white-space: pre;
+    border: 1px solid #333;
+    min-height: 300px;
+}
+
+.blink {
+    display: inline-block;
+    width: 8px;
+    height: 1.2em;
+    background: #00ff00;
+    animation: terminal-blink 1s steps(2, start) infinite;
+    vertical-align: middle;
+    margin-left: 2px;
+}
+
+@keyframes terminal-blink {
+    50% {
+        background: transparent;
+    }
+}
+
+.fade-in {
+    opacity: 0;
+    animation: terminal-fadeIn 0.2s forwards;
+}
+
+@keyframes terminal-fadeIn {
+    to {
+        opacity: 1;
+    }
+}
+
+@media (max-width: 768px) {
+    .terminal-wrapper {
+        padding: 0 1.5rem;
+    }
+    
+    .terminal {
+        font-size: 0.8rem;
+        padding: 1rem;
+        min-height: 200px;
+    }
 }

index.html

@@ -171,6 +171,14 @@ <h3>Simple & Elegant</h3>
 
         </div>
 
+        <!-- Terminal Section -->
+        <div class="terminal-wrapper">
+            <div class="terminal" id="terminal-main">
+                <div id="output-main"></div>
+                <div class="blink" id="cursor-main"></div>
+            </div>
+        </div>
+
         <!-- Features Grid -->
         <section class="features-grid">
             <div class="feature-item">
@@ -391,6 +399,78 @@ <h4>Zero Configuration</h4>
                 }
             }
         }
+
+        // Terminal Typing Effect
+        const commands = [
+            "$ bin/dispatcher --version",
+            "  _/  '         _ _/  _     _ _/",
+            "  /  /  /) (/ _)  /  /  (/ (  /  1.7.17",
+            "           /",
+            " ",
+            "$ bin/dispatcher --help",
+            "Usage: bin/dispatcher COMMAND [OPTIONS]",
+            "Commands:",
+            "  download             \tDownload a resource from other servers",
+            "  exec                 \tTo execute native command(s)",
+            "  generate             \tPOJO object generator",
+            "  install              \tInstall a package",
+            "  open                 \tStart a default browser to open the specific URL",
+            "  say                  \tOutput words",
+            "  set                  \tSet system property",
+            "  sql-execute          \tExecutes the given SQL statement, which may be an INSERT, UPDATE, DELETE, or DDL statement",
+            "  sql-query            \tExecutes the given SQL statement, which returns a single ResultSet object",
+            "  update               \tUpdate for the latest version",
+            " ",
+            "Options:",
+            "  --allow-remote-access\tAllow to be accessed remotely",
+            "  --help               \tHelp command",
+            "  --host               \tHost name / IP",
+            "  --import             \tImport application",
+            "  --logo               \tPrint logo",
+            "  --settings           \tPrint settings",
+            "  --version            \tPrint version",
+            " ",
+            "Run 'bin/dispatcher COMMAND --help' for more information on a command.",
+            " ",
+            "$ bin/dispatcher say --words Hello --import tinystruct.examples.example",
+            "Hello",
+            " ",
+            "# bin/dispatcher start --import org.tinystruct.system.NettyHttpServer --server-port 777",
+            " ",
+            "  _/  '         _ _/  _     _ _/",
+            "  /  /  /) (/ _)  /  /  (/ (  /  1.7.17",
+            "           /",
+            " ",
+            `${new Date().toLocaleString()} org.tinystruct.system.NettyHttpServer start`,
+            "INFO: Netty server (777) startup in 30 ms"
+        ];
+
+        const outputMain = document.getElementById('output-main');
+        const cursorMain = document.getElementById('cursor-main');
+
+        let i = 0;
+
+        function typeCommands() {
+            if (i < commands.length) {
+                const line = commands[i];
+                const textDiv = document.createElement('div');
+                textDiv.textContent = line;
+                textDiv.classList.add('fade-in');
+                outputMain.appendChild(textDiv);
+                i++;
+                
+                // Auto scroll to bottom
+                const terminal = document.getElementById('terminal-main');
+                terminal.scrollTop = terminal.scrollHeight;
+                
+                setTimeout(typeCommands, 100);
+            } else {
+                // Keep cursor blinking at the end
+            }
+        }
+
+        // Start typing after a short delay
+        setTimeout(typeCommands, 1000);
     </script>
 </body>