more stuff

components/terminal.js

@@ -0,0 +1,90 @@
+class CustomTerminal extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          font-family: 'Courier New', monospace;
+          background-color: #1e1e1e;
+          color: #f0f0f0;
+          border-radius: 6px;
+          padding: 16px;
+          height: 400px;
+          overflow-y: auto;
+        }
+        .prompt {
+          color: #4CAF50;
+          margin-right: 8px;
+        }
+        .command {
+          color: #569CD6;
+        }
+        .output {
+          white-space: pre-wrap;
+          margin: 8px 0;
+        }
+        #input-line {
+          display: flex;
+          align-items: center;
+        }
+        #command-input {
+          background: transparent;
+          border: none;
+          color: white;
+          font-family: inherit;
+          font-size: inherit;
+          width: 100%;
+          outline: none;
+        }
+      </style>
+      <div id="terminal-output"></div>
+      <div id="input-line">
+        <span class="prompt">user@penguinos:~$</span>
+        <input type="text" id="command-input" autofocus>
+      </div>
+    `;
+
+    const commands = {
+      'help': 'Available commands: help, about, clear, ls, neofetch, date',
+      'about': 'PenguinOS v1.0 - Lightweight Linux Desktop Environment',
+      'clear': () => { this.shadowRoot.getElementById('terminal-output').innerHTML = ''; return ''; },
+      'ls': 'bin   dev  home  lib32  media  opt   root  sbin  sys  usr\nboot  etc  lib   lib64  mnt    proc  run   srv   tmp  var',
+      'neofetch': 'OS: PenguinOS Linux x86_64\nHost: Virtual Machine\nKernel: 5.4.0-91-generic\nUptime: 2 hours, 15 minutes\nPackages: 1243 (dpkg)\nShell: bash 5.0.17\nResolution: 1920x1080\nDE: PenguinDE\nTheme: Penguin-Dark [GTK2/3]\nCPU: Intel i7-10700K (8) @ 3.800GHz\nGPU: VMware SVGA II Adapter\nMemory: 2184MiB / 7872MiB',
+      'date': new Date().toString()
+    };
+
+    const input = this.shadowRoot.getElementById('command-input');
+    const output = this.shadowRoot.getElementById('terminal-output');
+
+    input.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') {
+        const command = input.value.trim();
+        input.value = '';
+        
+        // Add command to output
+        const commandLine = document.createElement('div');
+        commandLine.innerHTML = `<span class="prompt">user@penguinos:~$</span> <span class="command">${command}</span>`;
+        output.appendChild(commandLine);
+        
+        // Process command
+        let result = 'Command not found';
+        if (commands[command]) {
+          result = typeof commands[command] === 'function' 
+            ? commands[command]() 
+            : commands[command];
+        }
+        
+        // Add output
+        const outputDiv = document.createElement('div');
+        outputDiv.className = 'output';
+        outputDiv.textContent = result;
+        output.appendChild(outputDiv);
+        
+        // Scroll to bottom
+        this.scrollTop = this.scrollHeight;
+      }
+    });
+  }
+}
+customElements.define('custom-terminal', CustomTerminal);

index.html

@@ -55,11 +55,11 @@
                 </div>
                 <div class="p-2">
                     <div class="text-primary-300 uppercase text-xs font-bold px-4 py-2">Applications</div>
-                    <a href="#" class="flex items-center px-4 py-2 text-primary-200 hover:text-white rounded mx-2 mb-1">
+                    <a href="terminal.html" class="flex items-center px-4 py-2 text-primary-200 hover:text-white rounded mx-2 mb-1">
                         <i data-feather="terminal" class="mr-3"></i>
                         Terminal
                     </a>
-                    <a href="#" class="flex items-center px-4 py-2 text-primary-200 hover:text-white rounded mx-2 mb-1">
+<a href="#" class="flex items-center px-4 py-2 text-primary-200 hover:text-white rounded mx-2 mb-1">
                         <i data-feather="file-text" class="mr-3"></i>
                         File Manager
                     </a>
@@ -163,13 +163,13 @@
                 <div class="bg-white rounded-lg shadow p-6 mb-6">
                     <h3 class="text-lg font-semibold text-secondary-900 mb-4">Quick Access</h3>
                     <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
-                        <a href="#" class="flex flex-col items-center p-4 rounded-lg hover:bg-gray-50 text-center">
+                        <a href="terminal.html" class="flex flex-col items-center p-4 rounded-lg hover:bg-gray-50 text-center">
                             <div class="p-3 rounded-full bg-gray-100 text-primary-500 mb-2">
                                 <i data-feather="terminal"></i>
                             </div>
                             <span class="text-sm">Terminal</span>
                         </a>
-                        <a href="#" class="flex flex-col items-center p-4 rounded-lg hover:bg-gray-50 text-center">
+<a href="#" class="flex flex-col items-center p-4 rounded-lg hover:bg-gray-50 text-center">
                             <div class="p-3 rounded-full bg-gray-100 text-blue-500 mb-2">
                                 <i data-feather="file-text"></i>
                             </div>
@@ -280,7 +280,8 @@
     <script>
         feather.replace();
     </script>
+    <script src="components/terminal.js"></script>
     <script src="script.js"></script>
-<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+    <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
 </html>

style.css

@@ -86,6 +86,30 @@ nav::-webkit-scrollbar-thumb:hover {
     background-color: #27c93f;
 }
 
+/* Terminal window controls */
+.window-controls {
+    display: flex;
+    gap: 8px;
+}
+
+.window-btn {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    cursor: pointer;
+}
+
+.window-btn.close {
+    background-color: #ff5f56;
+}
+
+.window-btn.minimize {
+    background-color: #ffbd2e;
+}
+
+.window-btn.maximize {
+    background-color: #27c93f;
+}
 /* Add button active states */
 button:active {
     transform: scale(0.95);

terminal.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en" class="h-full">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Terminal - PenguinOS</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+</head>
+<body class="bg-gray-100 h-full">
+    <div class="flex h-full">
+        <!-- Sidebar -->
+        <div class="w-64 bg-primary-900 text-white h-full">
+            <!-- Same sidebar as index.html -->
+        </div>
+
+        <!-- Main Content -->
+        <div class="flex-1 flex flex-col overflow-hidden">
+            <!-- Top Bar -->
+            <header class="bg-white border-b border-gray-200 p-4 flex items-center justify-between">
+                <div class="flex items-center">
+                    <i data-feather="menu" class="mr-4 cursor-pointer text-secondary-500"></i>
+                    <h1 class="text-lg font-semibold">Terminal</h1>
+                </div>
+                <div class="flex items-center space-x-2">
+                    <div class="window-btn close"></div>
+                    <div class="window-btn minimize"></div>
+                    <div class="window-btn maximize"></div>
+                </div>
+            </header>
+
+            <!-- Terminal Content -->
+            <main class="flex-1 p-6">
+                <custom-terminal></custom-terminal>
+            </main>
+        </div>
+    </div>
+
+    <script>
+        feather.replace();
+    </script>
+    <script src="components/terminal.js"></script>
+    <script src="script.js"></script>
+</body>
+</html>