From 47d38977df0691b036e7124d8e55809e38d75616 Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Thu, 26 Jan 2023 15:49:04 -0500
Subject: [PATCH] More animation

---
 src/layouts/index.html                        | 71 ++-----------------
 .../partials/hero-terminal-animation.html     | 62 ++++++++++++++++
 .../tea-magic-terminal-animation.html         | 32 +++++++++
 3 files changed, 101 insertions(+), 64 deletions(-)
 create mode 100644 src/layouts/partials/hero-terminal-animation.html
 create mode 100644 src/layouts/partials/tea-magic-terminal-animation.html

diff --git a/src/layouts/index.html b/src/layouts/index.html
index 4ce74b5..8089483 100644
--- a/src/layouts/index.html
+++ b/src/layouts/index.html
@@ -43,6 +43,8 @@
   </div>
 </section>
 
+{{- partial "hero-terminal-animation.html" -}}
+
 <style>
 
   @media only screen and (min-width: 1200px) {
@@ -609,12 +611,16 @@
             <div class="traffic-light"></div>
           </div>
           <div class="terminal-content p-5">
-            <p class="teal small">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            <div class="terminal-content">
+              <p id="terminal-display"></p>
+            </div>
           </div>
         </div>
       </div>
     </div>
 
+    <!-- {{- partial "tea-magic-terminal-animation.html" -}} -->
+
     <!-- Second -->
 
     <div class="row feature-row p-xl-5 p-lg-5 p-md-3 p-sm-1 p-3 one-box-down">
@@ -877,69 +883,6 @@
     <div class="row">
       <div class="col">
 
-
-        <script>
-          const commands = [
-            { input: "$ node --eval 'console.log(\"Hello World!\")'", output: `command not found: node<br><span class="dark-gray">#Node is not installed, thus command is not found :/ ...</span><br>` },
-            { input: "$ sh <(curl tea.xyz) --yes", output: `installing ~/.tea...<br><table class="teal">
-    <thead>
-        <tr>
-            <th>% Total</th>
-            <th>% Received</th>
-            <th>% Xferd</th>
-            <th>Average Speed</th>
-            <th>Time</th>
-            <th>Time</th>
-            <th>Time</th>
-            <th>Current</th>
-        </tr>
-    </thead>
-    <tbody>
-        <tr>
-            <td>100</td>
-            <td>13306</td>
-            <td>100</td>
-            <td>54983</td>
-            <td>0</td>
-            <td>--:--:--</td>
-            <td>--:--:--</td>
-            <td>--:--:--</td>
-        </tr>
-        <tr>
-            <td colspan="8">k, we installed  <mark>/Users/userName/.tea/tea.xyz/v0.21.0/bin/tea</mark></td>
-        </tr>
-    </tbody>
-</table>
-` },
-            { input: "$ node --eval 'console.log(\"Hello World!\")'", output: `tea: installing nodejs.org^19<br><span class="dark-gray">#tea magically installs needed dependencies...</span>` },
-            { input: "", output: `Hello World! &#128526;<br><span class="dark-gray">#and tah-dah!</span>` },
-          ];
-
-          let commandIndex = 0;
-          let command = commands[commandIndex];
-          let commandOutput = "";
-
-          function typeCommand() {
-            if (commandIndex === commands.length) {
-              return;
-            }
-            if (command.input.length === 0) {
-              commandOutput += '\n' + command.output + '\n';
-              document.querySelector("#terminal-output").innerHTML = commandOutput;
-              commandIndex++;
-              command = commands[commandIndex];
-              setTimeout(typeCommand, 1000);
-              return;
-            }
-            commandOutput += command.input[0];
-            command.input = command.input.slice(1);
-            document.querySelector("#terminal-output").innerHTML = commandOutput;
-            setTimeout(typeCommand, 100);
-          }
-
-          typeCommand();
-        </script>
-
       </div>
     </div>
   </div>
diff --git a/src/layouts/partials/hero-terminal-animation.html b/src/layouts/partials/hero-terminal-animation.html
new file mode 100644
index 0000000..7ca879c
--- /dev/null
+++ b/src/layouts/partials/hero-terminal-animation.html
@@ -0,0 +1,62 @@
+
+        <script>
+          const commands = [
+            { input: "$ node --eval 'console.log(\"Hello World!\")'", output: `command not found: node<br><span class="dark-gray">#Node is not installed, thus command is not found :/ ...</span><br>` },
+            { input: "$ sh <(curl tea.xyz) --yes", output: `installing ~/.tea...<br><table class="teal">
+    <thead>
+        <tr>
+            <th>% Total</th>
+            <th>% Received</th>
+            <th>% Xferd</th>
+            <th>Average Speed</th>
+            <th>Time</th>
+            <th>Time</th>
+            <th>Time</th>
+            <th>Current</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>100</td>
+            <td>13306</td>
+            <td>100</td>
+            <td>54983</td>
+            <td>0</td>
+            <td>--:--:--</td>
+            <td>--:--:--</td>
+            <td>--:--:--</td>
+        </tr>
+        <tr>
+            <td colspan="8">k, we installed  <mark>/Users/userName/.tea/tea.xyz/v0.21.0/bin/tea</mark></td>
+        </tr>
+    </tbody>
+</table>
+` },
+            { input: "$ node --eval 'console.log(\"Hello World!\")'", output: `tea: installing nodejs.org^19<br><span class="dark-gray">#tea magically installs needed dependencies...</span>` },
+            { input: "", output: `Hello World! &#128526;<br><span class="dark-gray">#and tah-dah!</span>` },
+          ];
+
+          let commandIndex = 0;
+          let command = commands[commandIndex];
+          let commandOutput = "";
+
+          function typeCommand() {
+            if (commandIndex === commands.length) {
+              return;
+            }
+            if (command.input.length === 0) {
+              commandOutput += '\n' + command.output + '\n';
+              document.querySelector("#terminal-output").innerHTML = commandOutput;
+              commandIndex++;
+              command = commands[commandIndex];
+              setTimeout(typeCommand, 1000);
+              return;
+            }
+            commandOutput += command.input[0];
+            command.input = command.input.slice(1);
+            document.querySelector("#terminal-output").innerHTML = commandOutput;
+            setTimeout(typeCommand, 100);
+          }
+
+          typeCommand();
+        </script>
diff --git a/src/layouts/partials/tea-magic-terminal-animation.html b/src/layouts/partials/tea-magic-terminal-animation.html
new file mode 100644
index 0000000..9019f41
--- /dev/null
+++ b/src/layouts/partials/tea-magic-terminal-animation.html
@@ -0,0 +1,32 @@
+<script>
+  const arrCommands = [
+    { input: "$ python --eval 'print(\"Hello World!\")'", output: `command not found: python<br><span class="dark-gray">#Python is not installed, thus command is not found :/ ...</span><br>` },
+    { input: "$ sh <(curl mysite.com) --yes", output: `installing ~/.mysite...`},
+    { input: "$ python --eval 'print(\"Hello World!\")'", output: `mysite: installing python.org^19<br><span class="dark-gray">#mysite magically installs needed dependencies...</span>` },
+    { input: "", output: `Hello World! &#128526;<br><span class="dark-gray">#and tah-dah!</span>` },
+  ];
+
+  let intCommandIndex = 0;
+  let objCommand = arrCommands[intCommandIndex];
+  let strCommandOutput = "";
+
+  function typeCommand() {
+    if (intCommandIndex === arrCommands.length) {
+      return;
+    }
+    if (objCommand.input.length === 0) {
+      strCommandOutput += '\n' + objCommand.output + '\n';
+      document.querySelector("#terminal-display").innerHTML = strCommandOutput;
+      intCommandIndex++;
+      objCommand = arrCommands[intCommandIndex];
+      setTimeout(typeCommand, 1000);
+      return;
+    }
+    strCommandOutput += objCommand.input[0];
+    objCommand.input = objCommand.input.slice(1);
+    document.querySelector("#terminal-display").innerHTML = strCommandOutput;
+    setTimeout(typeCommand, 100);
+  }
+
+  typeCommand();
+</script>