Cosmetic changes and screensize toggle

MannavaVivek · Nov 20, 2023 · 0cf9eac · 0cf9eac
1 parent aff62c1
commit 0cf9eac
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 36 deletions.
diff --git a/index.html b/index.html
@@ -11,15 +11,16 @@
 <div class="terminal-window">
     <header>
         <div class="button red"></div>
-        <div class="button yellow"></div>
-        <div class="button green"></div>
+        <div class="button yellow" onclick="minimizeTerminal()"></div>
+        <div class="button green" onclick="toggleFullscreen()"></div>
+
     </header>
     <div id="terminal">
-        <p><span class="green">\[._.]/</span> - you're in   Vivek's cli! type `help` to get started.</p>
+        <p><span class="purple">[ツ]</span> - Welcome to personal CLI. Type help to get started.</p>
         <p class="hidden">
             <span class="prompt">
-                <span id="currentPath" class="root">roots/</span> <!-- Updated here -->
-                <span class="tick">❯</span>
+                <span id="currentPath" class="root">root/</span> <!-- Updated here -->
+                <span class="tick">&gt;</span>
 
             </span>
             <span contenteditable="true" class="input" spellcheck="false"></span>

diff --git a/styles.css b/styles.css
@@ -1,13 +1,12 @@
 body {
-  background-color: #211E3A;
+  background-color: #281e3f;
   font-family: Menlo, Monaco, "Consolas", "Courier New", "Courier";
 }
 
-/* .terminal-window { ... } */
 .terminal-window {
   text-align: left;
-  width: 600px;
-  height: 360px;
+  width: 800px; 
+  height: 480px; 
   border-radius: 10px;
   margin: auto;
   position: relative;
@@ -24,21 +23,19 @@ body {
 }
 
 .terminal-window.fullscreen {
-  width: 100%;
-  height: 100%;
+  width: 95vw;
+  height: 95vh;
   top: 0;
   left: 0;
 }
 
-/* .terminal-window header { ... } */
 .terminal-window header {
   background: #e0e8f0;
   height: 30px;
   border-radius: 8px 8px 0 0;
   padding-left: 10px;
 }
 
-/* .terminal-window header .button { ... } */
 .terminal-window header .button {
   width: 12px;
   height: 12px;
@@ -59,6 +56,7 @@ body {
 
 .terminal-window header .button.red {
   background: #e75448;
+  cursor: pointer;
 }
 
 .input {
@@ -68,11 +66,9 @@ body {
   border: none;
   margin: 0;
   padding: 0;
-  min-width: 10px; /* Set a minimum width for better visibility */
-  /* Additional styling for the input */
+  min-width: 10px; 
 }
 
-
 .input:empty::before {
   content: "\200B"; /* Zero-width space */
 }
@@ -85,7 +81,17 @@ body {
   color: #ffffff; /* White color */
 }
 
+.purple {
+  color: #ff00ff; /* Purple color */
+}
+
+.prompt {
+  color: #00ccff; /* Neon blue color */
+}
 
+.tick {
+  color: #00ccff; 
+}
 
 #terminal {
   color: white;
@@ -96,30 +102,17 @@ body {
   box-sizing: border-box;
   position: absolute;
   width: 100%;
+  height: 100%;
   top: 30px;
   bottom: 0;
   overflow-y: scroll;
   overflow: hidden; /* Hide the scrollbar */
-
-
 }
 
-
-#terminal span.input:focus-visible {
-  outline: none;
-  margin: 0;
-}
-
-
-
 @media only screen and (max-width: 650px){
   .terminal-window {
     width: 95%;
-    height: 60vh;
+    height: 80vh; 
     top: 10vh;
   }
-
-  .footer {
-    bottom: 20px;
-  }
-}
+}
diff --git a/terminal.js b/terminal.js
@@ -1,6 +1,22 @@
 document.addEventListener("DOMContentLoaded", function() {
     const terminal = document.getElementById("terminal");
     const promptElement = document.getElementById('currentPath');
+    const terminalWindow = document.querySelector('.terminal-window');
+    document.querySelector('.button.green').addEventListener('click', function () {
+        if (terminalWindow.classList.contains('minimized')) {
+            terminalWindow.classList.remove('minimized');
+        } else {
+            terminalWindow.classList.toggle('fullscreen');
+        }
+      });
+
+    document.querySelector('.button.yellow').addEventListener('click', function () {
+        if (terminalWindow.classList.contains('fullscreen')) {
+            terminalWindow.classList.remove('fullscreen');
+        } else {
+            terminalWindow.classList.toggle('minimized');
+        }
+    });
 
     terminal.addEventListener("keydown", function(event) {
         const inputElement = terminal.querySelector('.input');
@@ -13,7 +29,7 @@ document.addEventListener("DOMContentLoaded", function() {
 
             const newLine = document.createElement("p");
 
-            newLine.innerHTML = `${prompt} <span class="tick">❯ </span>${command}<br>${output}`;
+            newLine.innerHTML = `${prompt} <span class="tick">&gt; </span>${command}<br>${output}`;
             terminal.insertBefore(newLine, inputElement.parentNode);
             promptElement.textContent = currentPath;
             const nextSibling = newLine.nextElementSibling;
@@ -53,7 +69,7 @@ document.addEventListener("DOMContentLoaded", function() {
                     // Show suggestions
                     output = suggestions.join(' ');
                     const newLine = document.createElement("p");
-                    newLine.innerHTML = `${prompt} <span class="tick">❯ </span>${commandName}<br>${output}`;
+                    newLine.innerHTML = `${prompt} <span class="tick">&gt; </span>${commandName}<br>${output}`;
                     terminal.insertBefore(newLine, inputElement.parentNode);
                 } 
             } else {
@@ -77,7 +93,7 @@ document.addEventListener("DOMContentLoaded", function() {
                     // Show suggestions
                     output = suggestions.join(' ');
                     const newLine = document.createElement("p");
-                    newLine.innerHTML = `${prompt} <span class="tick">❯ </span>${commandName} ${target}<br>${output}`;
+                    newLine.innerHTML = `${prompt} <span class="tick">&gt; </span>${commandName} ${target}<br>${output}`;
                     terminal.insertBefore(newLine, inputElement.parentNode);
                 }
             }
@@ -126,7 +142,7 @@ document.addEventListener("DOMContentLoaded", function() {
     function createPrompt() {
         newLine = document.createElement("p");
         prompt = `<span class="prompt">${currentPath}</span>`;
-        newLine.innerHTML = `${prompt} <span class="tick">❯ </span><span contenteditable="true" class="input" spellcheck="false"></span>`;
+        newLine.innerHTML = `${prompt} <span class="tick">&gt; </span><span contenteditable="true" class="input" spellcheck="false"></span>`;
         terminal.appendChild(newLine); // Add a new empty line with the current prompt
         // focus curson on the input element
         inputElement = terminal.querySelector('.input');