diff --git a/dev-tools/docker/start_dev_local.sh b/dev-tools/docker/start_dev_local.sh
index 088edd8..71e2270 100644
--- a/dev-tools/docker/start_dev_local.sh
+++ b/dev-tools/docker/start_dev_local.sh
@@ -11,4 +11,5 @@ docker run -p 8080:8080 \
 --env KUBERNETES_SERVICE_HOST=$KINV_K8S_IP \
 --env KUBERNETES_SERVICE_PORT_HTTPS=6443 \
 --env NAMESPACE=namespace1 \
+-v html5:/var/www/test \
 luckysideburn/kubeinvaders:develop_local
diff --git a/html5/images/kubeinvaders_spaceship2.png b/html5/images/kubeinvaders_spaceship2.png
new file mode 100644
index 0000000..4cfdf56
Binary files /dev/null and b/html5/images/kubeinvaders_spaceship2.png differ
diff --git a/html5/index.html b/html5/index.html
index f14d19f..2ab6ed9 100644
--- a/html5/index.html
+++ b/html5/index.html
@@ -6,89 +6,7 @@
     <link rel="icon" type="image/x-icon" href="./images/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="./bootstrap-5.0.0-dist/css/bootstrap.min.css">
-    <style>
-
-      .custom-btn-group {
-        margin-top: 2%;
-        border: 5px solid #b2afaf;
-        border-radius: 5px;
-        -moz-border-radius: 15px;
-        -webkit-border-radius: 15px;
-        padding: 5px;
-        border-image-slice: 5;    
-      }
-
-      .logtail-group {
-        margin-top: 0%;
-        border: 5px solid #b2afaf;
-        border-radius: 5px;
-        -moz-border-radius: 15px;
-        -webkit-border-radius: 15px;
-        padding: 5px;
-        border-image-slice: 5;    
-      }
-
-      .chaos-prog-area {
-        border: 5px solid #b2afaf;
-        border-radius: 5px;
-        -moz-border-radius: 15px;
-        -webkit-border-radius: 15px;
-        padding: 5px;
-        border-image-slice: 5;
-      }
-
-      .btn-light  {
-        border-color: #000000;
-      }
-
-      .btn-light:hover, .btn-light:focus, .btn-light:active, .btn-light.active, .open .dropdown-toggle.btn-default {
-        background-color: #06812f;
-        color:#FFF;
-        border-color: #000000;
-      }
-
-      .btn-light-saved {
-        color: #fff;
-        background-color: #771996;
-        border-width: 1.5px;
-        border-color: #000000;
-      }
-
-      .btn-light:hover {
-        transform: scale(1.05);
-      }
-
-      @font-face {
-        font-family: pixel;
-        src: url('./fonts/pixel.otf');
-        font-size-adjust: inherit;
-      }
-
-      body {
-        background-color: #ffffff;
-      }
-
-      .modal-content {
-        background-color: #ffffff;
-
-      }
-
-      .modal-content {
-        background-color: #ffffff;
-
-      }
-      
-      .modal-dialog {
-        background-color: #ffffff;
-      }
-
-      div {
-        font-family: pixel;
-      }
-
-      canvas { background: #161616 ; display: block; margin: 0 auto; border:1px solid #ffffff;}
-
-    </style>
+    <link rel="stylesheet" href="./style.css">
   </head>
   <body>
     <nav class="navbar navbar-expand-lg navbar-li bg-dark">
@@ -107,19 +25,6 @@
                 <li><a class="dropdown-item" href="#" onclick="showSpecialKeys()">Show Special Keys</a></li>
                 <li><a class="dropdown-item" href="#" onclick="showCurrentChaosContainer()">Show Current Chaos Container for nodes</a></li>
                 <li><a class="dropdown-item" href="#" onclick="showSetCurrentChaosContainer()">Set Custom Chaos Container for nodes</a></li>
-                <!-- <li><a class="dropdown-item" href="#" onclick="showSetCurrentChaosContainer()">Load Consul</a></li>
-                <li><a class="dropdown-item" href="#" onclick="showSetCurrentChaosContainer()">Load Elasticsearch</a></li>
-                <li><a class="dropdown-item" href="#" onclick="showSetCurrentChaosContainer()">Load Etcd3</a></li>
-                <li><a class="dropdown-item" href="#" onclick="showSetCurrentChaosContainer()">Load Http</a></li>
-                <li><a class="dropdown-item" href="#" onclick="showSetCurrentChaosContainer()">Load Jira</a></li>
-                <li><a class="dropdown-item" href="#" onclick="showSetCurrentChaosContainer()">Load Kafka</a></li>
-                <li><a class="dropdown-item" href="#" onclick="showSetCurrentChaosContainer()">Load Kubernetes</a></li>
-                <li><a class="dropdown-item" href="#" onclick="showSetCurrentChaosContainer()">Load Mongodb</a></li>
-                <li><a class="dropdown-item" href="#" onclick="showSetCurrentChaosContainer()">Load Mysql</a></li>
-                <li><a class="dropdown-item" href="#" onclick="showSetCurrentChaosContainer()">Load Nomad</a></li>
-                <li><a class="dropdown-item" href="#" onclick="showSetCurrentChaosContainer()">Load Postgresql</a></li>
-                <li><a class="dropdown-item" href="#" onclick="showSetCurrentChaosContainer()">Load Prometheus</a></li>
-                <li><a class="dropdown-item" href="#" onclick="showSetCurrentChaosContainer()">Load Vault</a></li> -->
             </li>
           </ul>
         </div>
@@ -236,445 +141,239 @@
         </div>
       </div>
     </div>
-    <div class="container" id="gameContainer" style="width: 50%; height: 50%;">
-
-      <!-- START FIRST ROW -->
-      <div class="row" style="margin-top: 2%;">
-        <!-- START SWITCH BUTTONS FOR MODE (GAME, PROGRAMMING)-->
-        <div class="row" style="margin-bottom: 1%;">
-          <div class="col text-center">
-            <button type="button" id="gameModeButton" class="btn btn-light" onclick="startGameMode()">Game Mode</button>
-          </div>
-          <div class="col text-center">
-            <div id="programming-mode-buttons" style="display: none;">
-              <button type="button" id="runProgrammingModeButton" class="btn btn-dark" onclick="runChaosProgram()">RUN</button>
-            </div>
-          </div>
-          <div class="col text-center">
-            <button type="button" id="programmingModeButton" class="btn btn-light" onclick="startProgrammingMode()">Programming Mode</button>
-          </div>
-        </div>
-        <!-- END SWITCH BUTTONS FOR MODE (GAME, PROGRAMMING)-->
-
-        <!-- START CHAOS PROGRAM BUTTONS -->
-        <div id="programming-mode-buttons" style="display: none;">
-          <div class="row">
-            <div class="col text-center">
-            </div>
-            <div class="col text-center">
-            </div>
-            <div class="col text-center">
-            </div>
-          </div>
-        <!-- END CHAOS PROGRAMM BUTTONS -->
-      </div>
-      <!-- END FIRST ROW -->
-
-      <!-- START GAME MODE BUTTONS -->
-      <div id="game-buttons" style="display: none;">
-        <div class="row">
-          <div class="col text-center">
-            <button type="button" id="controlAutoPilotButton" class="btn btn-light" onclick="controlAutoPilot()">Start</button>
-          </div>
-          <div class="col text-center">
-            <input type="range" id="randomFactorInput" name="randomFactorInput" min="0" max="100" value="50" onclick="changeRandomFactor()">
-          </div>
-          <div class="col text-center">
-            <label for="randomFactorInput">Random Factor:&nbsp;<span id="currentRandomFactor">50</span></label>
-          </div>
-        </div>
-        <div class="row" style="margin-top: 1%;">
-          <div class="col text-center">
-            <button type="button" id="buttonShuffle" class="btn btn-light btn-sm" onclick="buttonShuffleHelper()">Disable Shuffle</button>
-          </div>
-          <div class="col text-center">
-            <button type="button" id="namespacesJumpButton" class="btn btn-light btn-sm" onclick="namespacesJumpControl()">Enable Auto NS Switch</button>
-          </div>
-          <div class="col text-center">
-            <button type="button" id="buttonOnlyPodName" class="btn btn-light btn-sm" onclick="showPodNameControl()">Hide Pods Name</button>
-          </div>
-        </div>
-      </div>
-      <!-- END GAME MODE BUTTONS -->
-
-      <!-- START METRICS ROW -->
-      <div class="row" align="center">
-        <div style="margin-top: 1%;" class="custom-btn-group">
-
-            <span style="color: #000000;">Deleted Pod Total:&nbsp;&nbsp;<span id="deleted_pods_total" style="color: #028320">0</span></span><br>
-            <span style="color: #000000">Chaos Jobs Total:&nbsp;&nbsp;<span id="chaos_jobs_total" style="color: #028320">0</span></span><br>
-
-            <span style="color: #000000">Current Chaos Pods:&nbsp;&nbsp;<span id="current_chaos_job_pod" style="color: #028320">0</span></span><br>
-            <span style="color: #000000">Not Running Pods:&nbsp;&nbsp;<span id="pods_not_running_on" style="color: #028320">0</span></span><br>
-
-            <span style="color: #000000">Current Replicas State Delay:&nbsp;&nbsp;</span><span id="fewer_replicas_seconds" style="color: #028320">0</span><font color="#4f4f4f">&nbsp;sec</font></span><br>
-            <span style="color: #000000">Latest Replicas State Delay:&nbsp;&nbsp;<span id="latest_fewer_replicas_seconds" style="color: #028320">0</span><font color="#4f4f4f">&nbsp;sec</font>&nbsp;</span>
-
-        </div>
-        <div class="">
-          <div class="row" style="margin-top: 2%;">
-            <font size="2">Load Testing Presets</font>
-          </div>
-          <div class="row">
-              <div class="btn-group" id="loadButtonGroup" role="group" aria-label="Basic example" style="overflow-x: scroll; width: 100%; padding-bottom: 2%; padding-top: 2%; scrollbar-color: dark;">
-                <button type="button" id="loadCassandra" class="btn btn-light btn-sm" onclick="loadPreset('cassandra', 'python')">Cassandra</button>
-                <button type="button" id="loadConsul" class="btn btn-light btn-sm" onclick="loadPreset('consul', 'python')">Consul</button>
-                <button type="button" id="loadElasticsearch" class="btn btn-light btn-sm" onclick="loadPreset('elasticsearch', 'python')">Elasticsearch</button>
-                <button type="button" id="loadEtcd3" class="btn btn-light btn-sm" onclick="loadPreset('etcd3', 'python')">Etcd3</button>
-                <button type="button" id="loadGitlab" class="btn btn-light btn-sm" onclick="loadPreset('gitlab', 'python')">Gitlab</button>
-                <button type="button" id="loadHttp" class="btn btn-light btn-sm" onclick="loadPreset('http', 'python')">Http</button>
-                <button type="button" id="loadJira" class="btn btn-light btn-sm" onclick="loadPreset('jira', 'python')">Jira</button>
-                <button type="button" id="loadKafka" class="btn btn-light btn-sm" onclick="loadPreset('kafka', 'python')">Kafka</button>
-                <button type="button" id="loadKubernetes" class="btn btn-light btn-sm" onclick="loadPreset('kubernetes', 'python')">Kubernetes</button>
-                <button type="button" id="loadMongodb" class="btn btn-light btn-sm" onclick="loadPreset('mongodb', 'python')">Mongodb</button>
-                <button type="button" id="loadMysql" class="btn btn-light btn-sm" onclick="loadPreset('mysql', 'python')">Mysql</button>
-                <button type="button" id="loadNomad" class="btn btn-light btn-sm" onclick="loadPreset('nomad', 'python')">Nomad</button>
-                <button type="button" id="loadPostgresql" class="btn btn-light btn-sm" onclick="loadPreset('postgresql', 'python')">Postgresql</button>
-                <button type="button" id="loadPrometheus" class="btn btn-light btn-sm" onclick="loadPreset('prometheus', 'python')">Prometheus</button>
-                <button type="button" id="loadRabbit" class="btn btn-light btn-sm" onclick="loadPreset('rabbit', 'python')">Rabbit</button>
-                <button type="button" id="loadSSH" class="btn btn-light btn-sm" onclick="loadPreset('SSH', 'python')">SSH</button>
-                <button type="button" id="loadVault" class="btn btn-light btn-sm" onclick="loadPreset('vault', 'python')">Vault</button>
-              </div>
-        </div>
-        </div>
-      </div>
-      <!-- END METRICS ROW -->
-
-      <!-- START CHAOS PROGRAMMING MODE SCREEN -->
-      <div id="chaos-program-screen" style="display: none;">
-        <div class="row" style="margin-top: 1%;">
-          <div id="alert_placeholder4" style="margin-top: 1%;"></div>
-          <div id="alert_placeholder_programming_mode" style="margin-top: 1%;"></div>
-          <div class="col">
-            <form>
-            <div class="form-group">
-              <label for="chaosProgramTextArea"></label>
-              <textarea class="form-control chaos-prog-area" id="chaosProgramTextArea" rows="50" style="min-width: 100%; font-family: Courier, monospace;">
-jobs:
-  cpu-attack-job:
-    additional-labels:
-      chaos-controller: kubeinvaders
-      chaos-type: stress-ng
-      chaos-codename: CODENAME_PLACEHOLDER
-    image: docker.io/luckysideburn/kubeinvaders-stress-ng:latest
-    command: "stress-ng"
-    args:
-      - --help
-
-  mem-attack-job:
-    additional-labels:
-      chaos-controller: kubeinvaders
-      chaos-type: stress-ng
-      chaos-codename: CODENAME_PLACEHOLDER
-    image: docker.io/luckysideburn/kubeinvaders-stress-ng:latest
-    command: "stress-ng"
-    args:
-      - --help
-
-experiments:
-  - name: cpu-attack-exp
-    job: cpu-attack-job
-    loop: 5
-
-  - name: mem-attack-exp
-    job: mem-attack-job
-    loop: 5
-              </textarea>
-            </div>
-            </form>
-          </div>
-          <div class="col" style="margin-top: 4%; overflow-y: scroll;  height:900px;">
-            <div id="chaosProgramFlow">
-              <div class="row"><div class="alert alert-light" role="alert" style="border-color: #000000; border-width: 1.5px;">test attack 1</div></div>
-              <img src="images/down-arrow.png" width="30" height="30" style="margin-bottom: 2%;">
-              <div class="row"><div class="alert alert-light" role="alert" style="border-color: #000000; border-width: 1.5px;">test attack 2</div></div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <!-- END CHAOS PROGRAMMING MODE SCREEN -->
-
-      <!-- START GAME MODE SCREEN -->
-      <div id="game-screen" style="display: none;">
+    <div class="container transition" id="gameContainer" style="width: 50%; height: 50%;">
+        <!-- START FIRST ROW -->
         <div class="row" style="margin-top: 2%;">
-          <canvas id="myCanvas" width="720" height="480"></canvas>
+          <!-- START SWITCH BUTTONS FOR MODE (GAME, PROGRAMMING)-->
+          <div class="row" style="margin-bottom: 1%;">
+            <div class="col text-center">
+              <button type="button" id="gameModeButton" class="btn btn-light" onclick="startGameMode()">Game Mode</button>
+            </div>
+            <div class="col text-center">
+              <div id="programming-mode-buttons" style="display: none;">
+                <button type="button" id="runProgrammingModeButton" class="btn btn-dark" onclick="runChaosProgram()">RUN</button>
+              </div>
+            </div>
+            <div class="col text-center">
+              <button type="button" id="programmingModeButton" class="btn btn-light" onclick="startProgrammingMode()">Programming Mode</button>
+            </div>
+          </div>
+          <!-- END SWITCH BUTTONS FOR MODE (GAME, PROGRAMMING)-->
+
+          <!-- START CHAOS PROGRAM BUTTONS -->
+          <div id="programming-mode-buttons" style="display: none;">
+            <div class="row">
+              <div class="col text-center">
+              </div>
+              <div class="col text-center">
+              </div>
+              <div class="col text-center">
+              </div>
+            </div>
+          <!-- END CHAOS PROGRAMM BUTTONS -->
         </div>
-        <div class="row">
-          <div class="col text-center">
+        <!-- END FIRST ROW -->
+
+        <!-- START GAME MODE BUTTONS -->
+        <div id="game-buttons" style="display: none;">
+          <div class="row">
+            <div class="col text-center">
+              <button type="button" id="controlAutoPilotButton" class="btn btn-light" onclick="controlAutoPilot()">Start</button>
+            </div>
+            <div class="col text-center">
+              <input type="range" id="randomFactorInput" name="randomFactorInput" min="0" max="100" value="50" onclick="changeRandomFactor()">
+            </div>
+            <div class="col text-center">
+              <label for="randomFactorInput">Random Factor:&nbsp;<span id="currentRandomFactor">50</span></label>
+            </div>
           </div>
-          <div class="col text-center">
-            <input type="button" style="margin-top: 2%" class="btn btn-light" id="zoomInGameScreenInput" name="zoomInGameScreenInput" value="+" onclick="zoomIn()">
-            <input type="button" style="margin-top: 2%" class="btn btn-light" id="zoomOutGameScreenInput" name="zoomOutGameScreenInput" value="-" onclick="zoomOut()">
-          </div>
-          <div class="col text-center">
+          <div class="row" style="margin-top: 1%;">
+            <div class="col text-center">
+              <button type="button" id="buttonShuffle" class="btn btn-light btn-sm" onclick="buttonShuffleHelper()">Disable Shuffle</button>
+            </div>
+            <div class="col text-center">
+              <button type="button" id="namespacesJumpButton" class="btn btn-light btn-sm" onclick="namespacesJumpControl()">Enable Auto NS Switch</button>
+            </div>
+            <div class="col text-center">
+              <button type="button" id="buttonOnlyPodName" class="btn btn-light btn-sm" onclick="showPodNameControl()">Hide Pods Name</button>
+            </div>
           </div>
         </div>
-      </div>
-      <!-- END GAME MODE SCREEN -->
+        <!-- END GAME MODE BUTTONS -->
+
+        <!-- START METRICS ROW -->
+        <div class="row transition" align="center" id="metricsPresetsRow">
+          <div style="margin-top: 1%;" class="custom-btn-group">
+
+              <span style="color: #000000;">Deleted Pod Total:&nbsp;&nbsp;<span id="deleted_pods_total" style="color: #028320">0</span></span><br>
+              <span style="color: #000000">Chaos Jobs Total:&nbsp;&nbsp;<span id="chaos_jobs_total" style="color: #028320">0</span></span><br>
+
+              <span style="color: #000000">Current Chaos Pods:&nbsp;&nbsp;<span id="current_chaos_job_pod" style="color: #028320">0</span></span><br>
+              <span style="color: #000000">Not Running Pods:&nbsp;&nbsp;<span id="pods_not_running_on" style="color: #028320">0</span></span><br>
+
+              <span style="color: #000000">Current Replicas State Delay:&nbsp;&nbsp;</span><span id="fewer_replicas_seconds" style="color: #028320">0</span><font color="#4f4f4f">&nbsp;sec</font></span><br>
+              <span style="color: #000000">Latest Replicas State Delay:&nbsp;&nbsp;<span id="latest_fewer_replicas_seconds" style="color: #028320">0</span><font color="#4f4f4f">&nbsp;sec</font>&nbsp;</span>
+
+          </div>
+          <div class="">
+            <div class="row" style="margin-top: 2%;">
+              <font size="2">Load Testing Presets</font>
+            </div>
+            <div class="row">
+                <div class="btn-group" id="loadButtonGroup" role="group" aria-label="Basic example" style="overflow-x: scroll; width: 100%; padding-bottom: 2%; padding-top: 2%; scrollbar-color: dark;">
+                  <button type="button" id="loadCassandra" class="btn btn-light btn-sm" onclick="loadPreset('cassandra', 'python')">Cassandra</button>
+                  <button type="button" id="loadConsul" class="btn btn-light btn-sm" onclick="loadPreset('consul', 'python')">Consul</button>
+                  <button type="button" id="loadElasticsearch" class="btn btn-light btn-sm" onclick="loadPreset('elasticsearch', 'python')">Elasticsearch</button>
+                  <button type="button" id="loadEtcd3" class="btn btn-light btn-sm" onclick="loadPreset('etcd3', 'python')">Etcd3</button>
+                  <button type="button" id="loadGitlab" class="btn btn-light btn-sm" onclick="loadPreset('gitlab', 'python')">Gitlab</button>
+                  <button type="button" id="loadHttp" class="btn btn-light btn-sm" onclick="loadPreset('http', 'python')">Http</button>
+                  <button type="button" id="loadJira" class="btn btn-light btn-sm" onclick="loadPreset('jira', 'python')">Jira</button>
+                  <button type="button" id="loadKafka" class="btn btn-light btn-sm" onclick="loadPreset('kafka', 'python')">Kafka</button>
+                  <button type="button" id="loadKubernetes" class="btn btn-light btn-sm" onclick="loadPreset('kubernetes', 'python')">Kubernetes</button>
+                  <button type="button" id="loadMongodb" class="btn btn-light btn-sm" onclick="loadPreset('mongodb', 'python')">Mongodb</button>
+                  <button type="button" id="loadMysql" class="btn btn-light btn-sm" onclick="loadPreset('mysql', 'python')">Mysql</button>
+                  <button type="button" id="loadNomad" class="btn btn-light btn-sm" onclick="loadPreset('nomad', 'python')">Nomad</button>
+                  <button type="button" id="loadPostgresql" class="btn btn-light btn-sm" onclick="loadPreset('postgresql', 'python')">Postgresql</button>
+                  <button type="button" id="loadPrometheus" class="btn btn-light btn-sm" onclick="loadPreset('prometheus', 'python')">Prometheus</button>
+                  <button type="button" id="loadRabbit" class="btn btn-light btn-sm" onclick="loadPreset('rabbit', 'python')">Rabbit</button>
+                  <button type="button" id="loadSSH" class="btn btn-light btn-sm" onclick="loadPreset('SSH', 'python')">SSH</button>
+                  <button type="button" id="loadVault" class="btn btn-light btn-sm" onclick="loadPreset('vault', 'python')">Vault</button>
+                </div>
+          </div>
+          </div>
+        </div>
+        <!-- END METRICS ROW -->
+
+        <!-- START CHAOS PROGRAMMING MODE SCREEN -->
+        <div id="chaos-program-screen" style="display: none;">
+          <div class="row" style="margin-top: 1%;">
+            <div id="alert_placeholder4" style="margin-top: 1%;"></div>
+            <div id="alert_placeholder_programming_mode" style="margin-top: 1%;"></div>
+            <div class="col">
+              <form>
+              <div class="form-group">
+                <label for="chaosProgramTextArea"></label>
+                <textarea class="form-control chaos-prog-area" id="chaosProgramTextArea" rows="50" style="min-width: 100%; font-family: Courier, monospace;">
+  jobs:
+    cpu-attack-job:
+      additional-labels:
+        chaos-controller: kubeinvaders
+        chaos-type: stress-ng
+        chaos-codename: CODENAME_PLACEHOLDER
+      image: docker.io/luckysideburn/kubeinvaders-stress-ng:latest
+      command: "stress-ng"
+      args:
+        - --help
+
+    mem-attack-job:
+      additional-labels:
+        chaos-controller: kubeinvaders
+        chaos-type: stress-ng
+        chaos-codename: CODENAME_PLACEHOLDER
+      image: docker.io/luckysideburn/kubeinvaders-stress-ng:latest
+      command: "stress-ng"
+      args:
+        - --help
+
+  experiments:
+    - name: cpu-attack-exp
+      job: cpu-attack-job
+      loop: 5
+
+    - name: mem-attack-exp
+      job: mem-attack-job
+      loop: 5
+                </textarea>
+              </div>
+              </form>
+            </div>
+            <div class="col" style="margin-top: 4%; overflow-y: scroll;  height:900px;">
+              <div id="chaosProgramFlow">
+                <div class="row"><div class="alert alert-light" role="alert" style="border-color: #000000; border-width: 1.5px;">test attack 1</div></div>
+                <img src="images/down-arrow.png" width="30" height="30" style="margin-bottom: 2%;">
+                <div class="row"><div class="alert alert-light" role="alert" style="border-color: #000000; border-width: 1.5px;">test attack 2</div></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- END CHAOS PROGRAMMING MODE SCREEN -->
+
+        <!-- START GAME MODE SCREEN -->
+        <div id="game-screen" style="display: none;">
+          <div class="row" style="margin-top: 2%;">
+            <canvas id="myCanvas" width="720" height="480"></canvas>
+          </div>
+          <div class="row">
+            <div class="col text-center">
+            </div>
+            <div class="col text-center">
+              <input type="button" style="margin-top: 2%" class="btn btn-light" id="zoomInGameScreenInput" name="zoomInGameScreenInput" value="+" onclick="zoomIn()">
+              <input type="button" style="margin-top: 2%" class="btn btn-light" id="zoomOutGameScreenInput" name="zoomOutGameScreenInput" value="-" onclick="zoomOut()">
+            </div>
+            <div class="col text-center">
+            </div>
+          </div>
+        </div>
+        <!-- END GAME MODE SCREEN -->
    
-    <!-- HELPER ALERT -->
-    <div class="row">
-      <div id="alert_placeholder" style="margin-top: 3%;"></div>
-      <div id="alert_placeholder3" style="margin-top: 3%;"></div>
-    </div>
-
-    <!-- LOG TAIL ROW -->
-    <div class="logtail-group">
-      <div class="row" style="margin-top: 1%;">
-        <div class="col text-center">
-          <button type="button" id="logConsoleButton" class="btn btn-light" onclick="setLogConsole()">Start Logs Tail</button>
-        </div>
-      </div>
-
-      <div class="row">
-        <div class="col text-center">
-        </div>
-        <div class="col text-center">
-          <input type="button" style="margin-top: 2%" class="btn btn-light" id="zoomInGameScreenInput2" name="zoomInGameScreenInput2" value="+" onclick="zoomIn()">
-          <input type="button" style="margin-top: 2%" class="btn btn-light" id="zoomOutGameScreenInput2" name="zoomOutGameScreenInput2" value="-" onclick="zoomOut()">
-        </div>
-        <div class="col text-center">
-        </div>
-      </div> 
-    
-      <div id="logTailRegexInput" style="display: block;">
-        <div class="row" style="margin-top: 2%; padding-left: 2%; padding-right: 2%;">
-          <input type="text" style="font-family: Courier New, Courier, monospace;" id="logTailRegex" value='{"pod":".*", "namespace":"namespace1", "labels":".*", "annotations":".*", "containers":".*"}'/>
-        </div>
-        <div class="row" style="margin-top: 1%;">
-          <div class="col text-center">
-            <button type="button" style="width: 10em;" id="logConsoleRegex" class="btn btn-sm btn-dark ext-center" onclick="setLogRegex()">Set Regex</button>
-          </div>
-        </div>
-      </div>
-
-      <div id="logTailScreen" style="display: none;">
+        <!-- HELPER ALERT -->
         <div class="row">
-          <div id="logTailDiv" style="margin-top: 2%; overflow-y: scroll; height:700px; display: none; padding-left: 3%; padding-right: 3%;"></div>
+          <div id="alert_placeholder" style="margin-top: 3%;"></div>
+          <div id="alert_placeholder3" style="margin-top: 3%;"></div>
+        </div>
+
+        <!-- LOG TAIL ROW -->
+        <div class="logtail-group">
+          <div class="row" style="margin-top: 1%;">
+            <div class="col text-center">
+              <button type="button" id="logConsoleButton" class="btn btn-light" onclick="setLogConsole()">Start Logs Tail</button>
+            </div>
+          </div>
+
+          <div class="row">
+            <div class="col text-center">
+            </div>
+            <div class="col text-center">
+              <input type="button" style="margin-top: 2%" class="btn btn-light" id="zoomInGameScreenInput2" name="zoomInGameScreenInput2" value="+" onclick="zoomIn()">
+              <input type="button" style="margin-top: 2%" class="btn btn-light" id="zoomOutGameScreenInput2" name="zoomOutGameScreenInput2" value="-" onclick="zoomOut()">
+            </div>
+            <div class="col text-center">
+            </div>
+          </div> 
+      
+          <div id="logTailRegexInput" style="display: block;">
+            <div class="row" style="margin-top: 2%; padding-left: 2%; padding-right: 2%;">
+              <input type="text" style="font-family: Courier New, Courier, monospace;" id="logTailRegex" value='{"pod":".*", "namespace":"namespace1", "labels":".*", "annotations":".*", "containers":".*"}'/>
+            </div>
+            <div class="row" style="margin-top: 1%;">
+              <div class="col text-center">
+                <button type="button" style="width: 10em;" id="logConsoleRegex" class="btn btn-sm btn-dark ext-center" onclick="setLogRegex()">Set Regex</button>
+              </div>
+            </div>
+          </div>
+
+          <div id="logTailScreen" style="display: none;">
+            <div class="row">
+              <div id="logTailDiv" style="margin-top: 2%; overflow-y: scroll; height:700px; display: none; padding-left: 3%; padding-right: 3%;"></div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
 
     <div id="footer" style="margin-top: 5%;">
       <div align="center" style="margin-top: 10%;">
-        <img src="images/kubeinvaders_spaceship.png">
+        <img src="images/kubeinvaders_spaceship2.png" id="spaceShip">
       </div>
       <div class="container text-center" style="margin-top: 1%;">
         <p class="text-muted credit" style="color:#fff">kubeinvaders_version: v1.9.6</p>
       </div>
     </div>
 
-    <script src="kubeinvaders.js"></script>
+    <script src="./utils.js"></script>
+    <script src="./kubeinvaders.js"></script>
     <script src="./bootstrap-5.0.0-dist/js/bootstrap.min.js"></script>
     <script src="./js/jquery-3.6.0.min.js"></script>
     <script src="./js/popper.min.js"></script>
-
-    <script>
-
-      loadPresetsCodeJson = `{
-        "cassandra": "ZnJvbSBjYXNzYW5kcmEuY2x1c3RlciBpbXBvcnQgQ2x1c3Rlcgpmcm9tIHJhbmRvbSBpbXBvcnQgcmFuZGludAppbXBvcnQgdGltZQoKZGVmIG1haW4oKToKICAgIGNsdXN0ZXIgPSBDbHVzdGVyKFsnMTI3LjAuMC4xJ10pCiAgICBzZXNzaW9uID0gY2x1c3Rlci5jb25uZWN0KCkKCiAgICBzZXNzaW9uLmV4ZWN1dGUoIkNSRUFURSBLRVlTUEFDRSBJRiBOT1QgRVhJU1RTIHRlc3QgV0lUSCBSRVBMSUNBVElPTiA9IHsgJ2NsYXNzJzogJ1NpbXBsZVN0cmF0ZWd5JywgJ3JlcGxpY2F0aW9uX2ZhY3Rvcic6IDEgfSIpCiAgICBzZXNzaW9uLmV4ZWN1dGUoIkNSRUFURSBUQUJMRSBJRiBOT1QgRVhJU1RTIHRlc3QubWVzc2FnZXMgKGlkIGludCBQUklNQVJZIEtFWSwgbWVzc2FnZSB0ZXh0KSIpCgogICAgZm9yIGkgaW4gcmFuZ2UoMTAwMCk6CiAgICAgICAgc2Vzc2lvbi5leGVjdXRlKCJJTlNFUlQgSU5UTyB0ZXN0Lm1lc3NhZ2VzIChpZCwgbWVzc2FnZSkgVkFMVUVTICglcywgJyVzJykiICUgKGksIHN0cihyYW5kaW50KDAsIDEwMDApKSkpCiAgICAgICAgdGltZS5zbGVlcCgwLjAwMSkKCiAgICBjbHVzdGVyLnNodXRkb3duKCkKCmlmIF9fbmFtZV9fID09ICJfX21haW5fXyI6CiAgICBtYWluKCk=",
-        "consul": "aW1wb3J0IHRpbWUKaW1wb3J0IGNvbnN1bAoKIyBDb25uZWN0IHRvIHRoZSBDb25zdWwgY2x1c3RlcgpjbGllbnQgPSBjb25zdWwuQ29uc3VsKCkKCiMgQ29udGludW91c2x5IHJlZ2lzdGVyIGFuZCBkZXJlZ2lzdGVyIGEgc2VydmljZQp3aGlsZSBUcnVlOgogICAgIyBSZWdpc3RlciB0aGUgc2VydmljZQogICAgY2xpZW50LmFnZW50LnNlcnZpY2UucmVnaXN0ZXIoCiAgICAgICAgInN0cmVzcy10ZXN0LXNlcnZpY2UiLAogICAgICAgIHBvcnQ9ODA4MCwKICAgICAgICB0YWdzPVsic3RyZXNzLXRlc3QiXSwKICAgICAgICBjaGVjaz1jb25zdWwuQ2hlY2soKS50Y3AoImxvY2FsaG9zdCIsIDgwODAsICIxMHMiKQogICAgKQoKICAgICMgRGVyZWdpc3RlciB0aGUgc2VydmljZQogICAgY2xpZW50LmFnZW50LnNlcnZpY2UuZGVyZWdpc3Rlcigic3RyZXNzLXRlc3Qtc2VydmljZSIpCgogICAgdGltZS5zbGVlcCgxKQoK",
-        "elasticsearch": "aW1wb3J0IHRpbWUKZnJvbSBlbGFzdGljc2VhcmNoIGltcG9ydCBFbGFzdGljc2VhcmNoCgojIENvbm5lY3QgdG8gdGhlIEVsYXN0aWNzZWFyY2ggY2x1c3RlcgplcyA9IEVsYXN0aWNzZWFyY2goWyJsb2NhbGhvc3QiXSkKCiMgQ29udGludW91c2x5IGluZGV4IGFuZCBkZWxldGUgZG9jdW1lbnRzCndoaWxlIFRydWU6CiAgICAjIEluZGV4IGEgZG9jdW1lbnQKICAgIGVzLmluZGV4KGluZGV4PSJ0ZXN0LWluZGV4IiwgZG9jX3R5cGU9InRlc3QtdHlwZSIsIGlkPTEsIGJvZHk9eyJ0ZXN0IjogInRlc3QifSkKCiAgICAjIERlbGV0ZSB0aGUgZG9jdW1lbnQKICAgIGVzLmRlbGV0ZShpbmRleD0idGVzdC1pbmRleCIsIGRvY190eXBlPSJ0ZXN0LXR5cGUiLCBpZD0xKQoKICAgIHRpbWUuc2xlZXAoMSkKCg==",
-        "etcd3": "aW1wb3J0IHRpbWUKaW1wb3J0IGV0Y2QzCgojIENvbm5lY3QgdG8gdGhlIGV0Y2QzIGNsdXN0ZXIKY2xpZW50ID0gZXRjZDMuY2xpZW50KCkKCiMgQ29udGludW91c2x5IHNldCBhbmQgZGVsZXRlIGtleXMKd2hpbGUgVHJ1ZToKICAgICMgU2V0IGEga2V5CiAgICBjbGllbnQucHV0KCIvc3RyZXNzLXRlc3Qta2V5IiwgInN0cmVzcyB0ZXN0IHZhbHVlIikKCiAgICAjIERlbGV0ZSB0aGUga2V5CiAgICBjbGllbnQuZGVsZXRlKCIvc3RyZXNzLXRlc3Qta2V5IikKCiAgICB0aW1lLnNsZWVwKDEpCgo=",
-        "gitlab": "aW1wb3J0IGdpdGxhYgppbXBvcnQgcmVxdWVzdHMKaW1wb3J0IHRpbWUKCmdsID0gZ2l0bGFiLkdpdGxhYignaHR0cHM6Ly9naXRsYWIuZXhhbXBsZS5jb20nLCBwcml2YXRlX3Rva2VuPSdteV9wcml2YXRlX3Rva2VuJykKCmRlZiBjcmVhdGVfcHJvamVjdCgpOgogICAgcHJvamVjdCA9IGdsLnByb2plY3RzLmNyZWF0ZSh7J25hbWUnOiAnTXkgUHJvamVjdCd9KQogICAgcHJpbnQoIkNyZWF0ZWQgcHJvamVjdDogIiwgcHJvamVjdC5uYW1lKQoKZGVmIG1haW4oKToKICAgIGZvciBpIGluIHJhbmdlKDEwMDApOgogICAgICAgIGNyZWF0ZV9wcm9qZWN0KCkKICAgICAgICB0aW1lLnNsZWVwKDAuMDAxKQoKaWYgX19uYW1lX18gPT0gIl9fbWFpbl9fIjoKICAgIG1haW4oKQ==",
-        "http": "aW1wb3J0IHRpbWUKaW1wb3J0IHJlcXVlc3RzCgojIFNldCB1cCB0aGUgVVJMIHRvIHNlbmQgcmVxdWVzdHMgdG8KdXJsID0gJ2h0dHA6Ly9sb2NhbGhvc3Q6ODA4MC8nCgojIFNldCB1cCB0aGUgbnVtYmVyIG9mIHJlcXVlc3RzIHRvIHNlbmQKbnVtX3JlcXVlc3RzID0gMTAwMDAKCiMgU2V0IHVwIHRoZSBwYXlsb2FkIHRvIHNlbmQKcGF5bG9hZCA9IHsna2V5JzogJ3ZhbHVlJ30KCiMgU2VuZCB0aGUgcmVxdWVzdHMKc3RhcnRfdGltZSA9IHRpbWUudGltZSgpCmZvciBpIGluIHJhbmdlKG51bV9yZXF1ZXN0cyk6CiAgICByZXF1ZXN0cy5wb3N0KHVybCwganNvbj1wYXlsb2FkKQplbmRfdGltZSA9IHRpbWUudGltZSgpCgojIENhbGN1bGF0ZSB0aGUgdGhyb3VnaHB1dAp0aHJvdWdocHV0ID0gbnVtX3JlcXVlc3RzIC8gKGVuZF90aW1lIC0gc3RhcnRfdGltZSkKcHJpbnQoZidUaHJvdWdocHV0OiB7dGhyb3VnaHB1dH0gcmVxdWVzdHMvc2Vjb25kJykKCg==",
-        "jira": "aW1wb3J0IHRpbWUKZnJvbSBqaXJhIGltcG9ydCBKSVJBCgojIENvbm5lY3QgdG8gdGhlIEppcmEgaW5zdGFuY2UKamlyYSA9IEpJUkEoCiAgICBzZXJ2ZXI9Imh0dHBzOi8vamlyYS5leGFtcGxlLmNvbSIsCiAgICBiYXNpY19hdXRoPSgidXNlciIsICJwYXNzd29yZCIpCikKCiMgQ29udGludW91c2x5IGNyZWF0ZSBhbmQgZGVsZXRlIGlzc3Vlcwp3aGlsZSBUcnVlOgogICAgIyBDcmVhdGUgYW4gaXNzdWUKICAgIGlzc3VlID0gamlyYS5jcmVhdGVfaXNzdWUoCiAgICAgICAgcHJvamVjdD0iUFJPSkVDVCIsCiAgICAgICAgc3VtbWFyeT0iU3RyZXNzIHRlc3QgaXNzdWUiLAogICAgICAgIGRlc2NyaXB0aW9uPSJUaGlzIGlzIGEgc3RyZXNzIHRlc3QgaXNzdWUuIiwKICAgICAgICBpc3N1ZXR5cGU9eyJuYW1lIjogIkJ1ZyJ9CiAgICApCgogICAgIyBEZWxldGUgdGhlIGlzc3VlCiAgICBqaXJhLmRlbGV0ZV9pc3N1ZShpc3N1ZSkKCiAgICB0aW1lLnNsZWVwKDEpCgo=",
-        "kafka": "aW1wb3J0IHRpbWUKaW1wb3J0IHJhbmRvbQoKZnJvbSBrYWZrYSBpbXBvcnQgS2Fma2FQcm9kdWNlcgoKIyBTZXQgdXAgdGhlIEthZmthIHByb2R1Y2VyCnByb2R1Y2VyID0gS2Fma2FQcm9kdWNlcihib290c3RyYXBfc2VydmVycz1bJ2xvY2FsaG9zdDo5MDkyJ10pCgojIFNldCB1cCB0aGUgdG9waWMgdG8gc2VuZCBtZXNzYWdlcyB0bwp0b3BpYyA9ICd0ZXN0JwoKIyBTZXQgdXAgdGhlIG51bWJlciBvZiBtZXNzYWdlcyB0byBzZW5kCm51bV9tZXNzYWdlcyA9IDEwMDAwCgojIFNldCB1cCB0aGUgcGF5bG9hZCB0byBzZW5kCnBheWxvYWQgPSBiJ2EnICogMTAwMDAwMAoKIyBTZW5kIHRoZSBtZXNzYWdlcwpzdGFydF90aW1lID0gdGltZS50aW1lKCkKZm9yIGkgaW4gcmFuZ2UobnVtX21lc3NhZ2VzKToKICAgIHByb2R1Y2VyLnNlbmQodG9waWMsIHBheWxvYWQpCmVuZF90aW1lID0gdGltZS50aW1lKCkKCiMgQ2FsY3VsYXRlIHRoZSB0aHJvdWdocHV0CnRocm91Z2hwdXQgPSBudW1fbWVzc2FnZXMgLyAoZW5kX3RpbWUgLSBzdGFydF90aW1lKQpwcmludChmJ1Rocm91Z2hwdXQ6IHt0aHJvdWdocHV0fSBtZXNzYWdlcy9zZWNvbmQnKQoKIyBGbHVzaCBhbmQgY2xvc2UgdGhlIHByb2R1Y2VyCnByb2R1Y2VyLmZsdXNoKCkKcHJvZHVjZXIuY2xvc2UoKQo=",
-        "kubernetes": "aW1wb3J0IHRpbWUKaW1wb3J0IGt1YmVybmV0ZXMKCiMgQ3JlYXRlIGEgS3ViZXJuZXRlcyBjbGllbnQKY2xpZW50ID0ga3ViZXJuZXRlcy5jbGllbnQuQ29yZVYxQXBpKCkKCiMgQ29udGludW91c2x5IGNyZWF0ZSBhbmQgZGVsZXRlIHBvZHMKd2hpbGUgVHJ1ZToKICAgICMgQ3JlYXRlIGEgcG9kCiAgICBwb2QgPSBrdWJlcm5ldGVzLmNsaWVudC5WMVBvZCgKICAgICAgICBtZXRhZGF0YT1rdWJlcm5ldGVzLmNsaWVudC5WMU9iamVjdE1ldGEobmFtZT0ic3RyZXNzLXRlc3QtcG9kIiksCiAgICAgICAgc3BlYz1rdWJlcm5ldGVzLmNsaWVudC5WMVBvZFNwZWMoCiAgICAgICAgICAgIGNvbnRhaW5lcnM9W2t1YmVybmV0ZXMuY2xpZW50LlYxQ29udGFpbmVyKAogICAgICAgICAgICAgICAgbmFtZT0ic3RyZXNzLXRlc3QtY29udGFpbmVyIiwKICAgICAgICAgICAgICAgIGltYWdlPSJuZ2lueDpsYXRlc3QiCiAgICAgICAgICAgICldCiAgICAgICAgKQogICAgKQogICAgY2xpZW50LmNyZWF0ZV9uYW1lc3BhY2VkX3BvZChuYW1lc3BhY2U9ImRlZmF1bHQiLCBib2R5PXBvZCkKCiAgICAjIERlbGV0ZSB0aGUgcG9kCiAgICBjbGllbnQuZGVsZXRlX25hbWVzcGFjZWRfcG9kKG5hbWU9InN0cmVzcy10ZXN0LXBvZCIsIG5hbWVzcGFjZT0iZGVmYXVsdCIpCgogICAgdGltZS5zbGVlcCgxKQoK",
-        "mongodb": "aW1wb3J0IHRpbWUKaW1wb3J0IHJhbmRvbQpmcm9tIHB5bW9uZ28gaW1wb3J0IE1vbmdvQ2xpZW50CgojIFNldCB1cCB0aGUgTW9uZ29EQiBjbGllbnQKY2xpZW50ID0gTW9uZ29DbGllbnQoJ21vbmdvZGI6Ly9sb2NhbGhvc3Q6MjcwMTcvJykKCiMgU2V0IHVwIHRoZSBkYXRhYmFzZSBhbmQgY29sbGVjdGlvbiB0byB1c2UKZGIgPSBjbGllbnRbJ3Rlc3QnXQpjb2xsZWN0aW9uID0gZGJbJ3Rlc3QnXQoKIyBTZXQgdXAgdGhlIG51bWJlciBvZiBkb2N1bWVudHMgdG8gaW5zZXJ0Cm51bV9kb2N1bWVudHMgPSAxMDAwMAoKIyBTZXQgdXAgdGhlIHBheWxvYWQgdG8gaW5zZXJ0CnBheWxvYWQgPSB7J2tleSc6ICdhJyAqIDEwMDAwMDB9CgojIEluc2VydCB0aGUgZG9jdW1lbnRzCnN0YXJ0X3RpbWUgPSB0aW1lLnRpbWUoKQpmb3IgaSBpbiByYW5nZShudW1fZG9jdW1lbnRzKToKICAgIGNvbGxlY3Rpb24uaW5zZXJ0X29uZShwYXlsb2FkKQplbmRfdGltZSA9IHRpbWUudGltZSgpCgojIENhbGN1bGF0ZSB0aGUgdGhyb3VnaHB1dAp0aHJvdWdocHV0ID0gbnVtX2RvY3VtZW50cyAvIChlbmRfdGltZSAtIHN0YXJ0X3RpbWUpCnByaW50KGYnVGhyb3VnaHB1dDoge3Rocm91Z2hwdXR9IGRvY3VtZW50cy9zZWNvbmQnKQoKIyBDbG9zZSB0aGUgY2xpZW50CmNsaWVudC5jbG9zZSgpCgo=",
-        "mysql": "aW1wb3J0IHRpbWUKaW1wb3J0IG15c3FsLmNvbm5lY3RvcgoKIyBDb25uZWN0IHRvIHRoZSBNeVNRTCBkYXRhYmFzZQpjbnggPSBteXNxbC5jb25uZWN0b3IuY29ubmVjdCgKICAgIGhvc3Q9ImxvY2FsaG9zdCIsCiAgICB1c2VyPSJyb290IiwKICAgIHBhc3N3b3JkPSJwYXNzd29yZCIsCiAgICBkYXRhYmFzZT0idGVzdCIKKQpjdXJzb3IgPSBjbnguY3Vyc29yKCkKCiMgQ29udGludW91c2x5IGluc2VydCByb3dzIGludG8gdGhlICJ0ZXN0X3RhYmxlIiB0YWJsZQp3aGlsZSBUcnVlOgogICAgY3Vyc29yLmV4ZWN1dGUoIklOU0VSVCBJTlRPIHRlc3RfdGFibGUgKGNvbDEsIGNvbDIpIFZBTFVFUyAoJXMsICVzKSIsICgxLCAyKSkKICAgIGNueC5jb21taXQoKQogICAgdGltZS5zbGVlcCgxKQoKIyBDbG9zZSB0aGUgZGF0YWJhc2UgY29ubmVjdGlvbgpjbnguY2xvc2UoKQoK",
-        "nomad": "aW1wb3J0IHRpbWUKaW1wb3J0IG5vbWFkCgojIENyZWF0ZSBhIE5vbWFkIGNsaWVudApjbGllbnQgPSBub21hZC5Ob21hZCgpCgojIENyZWF0ZSBhIGJhdGNoIG9mIGpvYnMgdG8gc3VibWl0IHRvIE5vbWFkCmpvYnMgPSBbewogICAgIk5hbWUiOiAic3RyZXNzLXRlc3Qtam9iIiwKICAgICJUeXBlIjogImJhdGNoIiwKICAgICJEYXRhY2VudGVycyI6IFsiZGMxIl0sCiAgICAiVGFza0dyb3VwcyI6IFt7CiAgICAgICAgIk5hbWUiOiAic3RyZXNzLXRlc3QtdGFzay1ncm91cCIsCiAgICAgICAgIlRhc2tzIjogW3sKICAgICAgICAgICAgIk5hbWUiOiAic3RyZXNzLXRlc3QtdGFzayIsCiAgICAgICAgICAgICJEcml2ZXIiOiAicmF3X2V4ZWMiLAogICAgICAgICAgICAiQ29uZmlnIjogewogICAgICAgICAgICAgICAgImNvbW1hbmQiOiAic2xlZXAgMTAiCiAgICAgICAgICAgIH0sCiAgICAgICAgICAgICJSZXNvdXJjZXMiOiB7CiAgICAgICAgICAgICAgICAiQ1BVIjogNTAwLAogICAgICAgICAgICAgICAgIk1lbW9yeU1CIjogNTEyCiAgICAgICAgICAgIH0KICAgICAgICB9XQogICAgfV0KfV0KCiMgQ29udGludW91c2x5IHN1Ym1pdCB0aGUgYmF0Y2ggb2Ygam9icyB0byBOb21hZAp3aGlsZSBUcnVlOgogICAgZm9yIGpvYiBpbiBqb2JzOgogICAgICAgIGNsaWVudC5qb2JzLmNyZWF0ZShqb2IpCiAgICB0aW1lLnNsZWVwKDEpCgo=",
-        "postgresql": "aW1wb3J0IHRpbWUKaW1wb3J0IHJhbmRvbQppbXBvcnQgcHN5Y29wZzIKCiMgU2V0IHVwIHRoZSBjb25uZWN0aW9uIHBhcmFtZXRlcnMKcGFyYW1zID0gewogICAgJ2hvc3QnOiAnbG9jYWxob3N0JywKICAgICdwb3J0JzogJzU0MzInLAogICAgJ2RhdGFiYXNlJzogJ3Rlc3QnLAogICAgJ3VzZXInOiAncG9zdGdyZXMnLAogICAgJ3Bhc3N3b3JkJzogJ3Bhc3N3b3JkJwp9CgojIENvbm5lY3QgdG8gdGhlIGRhdGFiYXNlCmNvbm4gPSBwc3ljb3BnMi5jb25uZWN0KCoqcGFyYW1zKQoKIyBTZXQgdXAgdGhlIGN1cnNvcgpjdXIgPSBjb25uLmN1cnNvcigpCgojIFNldCB1cCB0aGUgdGFibGUgYW5kIHBheWxvYWQgdG8gaW5zZXJ0CnRhYmxlX25hbWUgPSAndGVzdCcKcGF5bG9hZCA9ICdhJyAqIDEwMDAwMDAKCiMgU2V0IHVwIHRoZSBudW1iZXIgb2Ygcm93cyB0byBpbnNlcnQKbnVtX3Jvd3MgPSAxMDAwMAoKIyBJbnNlcnQgdGhlIHJvd3MKc3RhcnRfdGltZSA9IHRpbWUudGltZSgpCmZvciBpIGluIHJhbmdlKG51bV9yb3dzKToKICAgIGN1ci5leGVjdXRlKGYiSU5TRVJUIElOVE8ge3RhYmxlX25hbWV9IChjb2wpIFZBTFVFUyAoJ3twYXlsb2FkfScpIikKY29ubi5jb21taXQoKQplbmRfdGltZSA9IHRpbWUudGltZSgpCgojIENhbGN1bGF0ZSB0aGUgdGhyb3VnaHB1dAp0aHJvdWdocHV0ID0gbnVtX3Jvd3MgLyAoZW5kX3RpbWUgLSBzdGFydF90aW1lKQpwcmludChmJ1Rocm91Z2hwdXQ6IHt0aHJvdWdocHV0fSByb3dzL3NlY29uZCcpCgojIENsb3NlIHRoZSBjdXJzb3IgYW5kIGNvbm5lY3Rpb24KY3VyLmNsb3NlKCkKY29ubi5jbG9zZSgpCgo=",
-        "prometheus": "aW1wb3J0IHRpbWUKaW1wb3J0IHJhbmRvbQpmcm9tIHByb21ldGhldXNfY2xpZW50IGltcG9ydCBDb2xsZWN0b3JSZWdpc3RyeSwgR2F1Z2UsIHB1c2hfdG9fZ2F0ZXdheQoKIyBTZXQgdXAgdGhlIG1ldHJpY3MgcmVnaXN0cnkKcmVnaXN0cnkgPSBDb2xsZWN0b3JSZWdpc3RyeSgpCgojIFNldCB1cCB0aGUgbWV0cmljIHRvIHB1c2gKZ2F1Z2UgPSBHYXVnZSgndGVzdF9nYXVnZScsICdBIHRlc3QgZ2F1Z2UnLCByZWdpc3RyeT1yZWdpc3RyeSkKCiMgU2V0IHVwIHRoZSBwdXNoIGdhdGV3YXkgVVJMCnB1c2hfZ2F0ZXdheSA9ICdodHRwOi8vbG9jYWxob3N0OjkwOTEnCgojIFNldCB1cCB0aGUgbnVtYmVyIG9mIHB1c2hlcyB0byBzZW5kCm51bV9wdXNoZXMgPSAxMDAwMAoKIyBTZXQgdXAgdGhlIG1ldHJpYyB2YWx1ZSB0byBwdXNoCnZhbHVlID0gcmFuZG9tLnJhbmRvbSgpCgojIFB1c2ggdGhlIG1ldHJpYwpzdGFydF90aW1lID0gdGltZS50aW1lKCkKZm9yIGkgaW4gcmFuZ2UobnVtX3B1c2hlcyk6CiAgICBnYXVnZS5zZXQodmFsdWUpCiAgICBwdXNoX3RvX2dhdGV3YXkocHVzaF9nYXRld2F5LCBqb2I9J3Rlc3Rfam9iJywgcmVnaXN0cnk9cmVnaXN0cnkpCmVuZF90aW1lID0gdGltZS50aW1lKCkKCiMgQ2FsY3VsYXRlIHRoZSB0aHJvdWdocHV0CnRocm91Z2hwdXQgPSBudW1fcHVzaGVzIC8gKGVuZF90aW1lIC0gc3RhcnRfdGltZSkKcHJpbnQoZidUaHJvdWdocHV0OiB7dGhyb3VnaHB1dH0gcHVzaGVzL3NlY29uZCcpCgo=",
-        "rabbit": "aW1wb3J0IHBpa2EKaW1wb3J0IHRpbWUKCmRlZiBzZW5kX21lc3NhZ2UoY2hhbm5lbCwgbWVzc2FnZSk6CiAgICBjaGFubmVsLmJhc2ljX3B1Ymxpc2goZXhjaGFuZ2U9JycsIHJvdXRpbmdfa2V5PSd0ZXN0X3F1ZXVlJywgYm9keT1tZXNzYWdlKQogICAgcHJpbnQoIlNlbnQgbWVzc2FnZTogIiwgbWVzc2FnZSkKCmRlZiBtYWluKCk6CiAgICBjb25uZWN0aW9uID0gcGlrYS5CbG9ja2luZ0Nvbm5lY3Rpb24ocGlrYS5Db25uZWN0aW9uUGFyYW1ldGVycygnbG9jYWxob3N0JykpCiAgICBjaGFubmVsID0gY29ubmVjdGlvbi5jaGFubmVsKCkKICAgIGNoYW5uZWwucXVldWVfZGVjbGFyZShxdWV1ZT0ndGVzdF9xdWV1ZScpCgogICAgZm9yIGkgaW4gcmFuZ2UoMTAwMCk6CiAgICAgICAgc2VuZF9tZXNzYWdlKGNoYW5uZWwsIHN0cihpKSkKICAgICAgICB0aW1lLnNsZWVwKDAuMDAxKQoKICAgIGNvbm5lY3Rpb24uY2xvc2UoKQoKaWYgX19uYW1lX18gPT0gIl9fbWFpbl9fIjoKICAgIG1haW4oKQ==",
-        "SSH": "aW1wb3J0IHBhcmFtaWtvCgojIERlZmluZSBzZXJ2ZXJzIGFycmF5CnNlcnZlcnMgPSBbJ3NlcnZlcjEnLCAnc2VydmVyMicsICdzZXJ2ZXIzJ10KCmZvciBzZXJ2ZXIgaW4gc2VydmVyczoKICAgIHB1YmxpY19rZXkgPSBwYXJhbWlrby5SU0FLZXkoZGF0YT1iJ3lvdXItcHVibGljLWtleS1zdHJpbmcnKQogICAgc3NoID0gcGFyYW1pa28uU1NIQ2xpZW50KCkKICAgIHNzaC5zZXRfbWlzc2luZ19ob3N0X2tleV9wb2xpY3kocGFyYW1pa28uQXV0b0FkZFBvbGljeSgpKQogICAgc3NoLmNvbm5lY3QoaG9zdG5hbWU9J3lvdXItc2VydmVyLW5hbWUnLCB1c2VybmFtZT0neW91ci11c2VybmFtZScsIHBrZXk9cHVibGljX2tleSkKICAgIHN0ZGluLCBzdGRvdXQsIHN0ZGVyciA9IHNzaC5leGVjX2NvbW1hbmQoJ3lvdXItY29tbWFuZCcpCiAgICBwcmludChzdGRvdXQucmVhZCgpKQogICAgc3NoLmNsb3NlKCkK",
-        "vault": "aW1wb3J0IHRpbWUKaW1wb3J0IGh2YWMKCiMgQ29ubmVjdCB0byB0aGUgVmF1bHQgaW5zdGFuY2UKY2xpZW50ID0gaHZhYy5DbGllbnQoKQpjbGllbnQuYXV0aF9hcHByb2xlKGFwcHJvbGVfaWQ9ImFwcHJvbGUtaWQiLCBzZWNyZXRfaWQ9InNlY3JldC1pZCIpCgojIENvbnRpbnVvdXNseSByZWFkIGFuZCB3cml0ZSBzZWNyZXRzCndoaWxlIFRydWU6CiAgICAjIFdyaXRlIGEgc2VjcmV0CiAgICBjbGllbnQud3JpdGUoInNlY3JldC9zdHJlc3MtdGVzdCIsIHZhbHVlPSJzZWNyZXQgdmFsdWUiKQoKICAgICMgUmVhZCB0aGUgc2VjcmV0CiAgICBjbGllbnQucmVhZCgic2VjcmV0L3N0cmVzcy10ZXN0IikKCiAgICB0aW1lLnNsZWVwKDEpCgo="
-      }`;
-
-      function closeSetLoadTestModal() {
-        $('#setLoadTestModal').modal('hide');
-        modal_opened = false;
-      }
-
-      function loadPreset(tool, lang) {
-        let decodedStringAtoB = "";
-        console.log("[GET-PRESETS] Loaded preset for " + tool);
-        loadPresetsCodeParsed = JSON.parse(loadPresetsCodeJson);
-        decodedStringAtoB = atob(loadPresetsCodeParsed[tool]);
-        latest_preset_name = tool;
-        latest_preset_lang = lang;
-        loadSavedPreset(tool, lang, decodedStringAtoB);
-        $("#presetLang").val(lang);
-        $("#presetName").val(tool);
-        $('#setLoadTestModal').modal('show');
-        modal_opened = true;
-        log_tail_switch = false;
-        log_tail_div.style.display = "none";
-        log_tail_screen.style.display = "none"
-        $("#logConsoleButton").text("Start Logs Tail");
-        if (programming_mode_switch == false) {
-          startProgrammingMode();
-        }
-      }
-
-      function changeRandomFactor() {
-        randomFactor = $("#randomFactorInput").val();
-        $("#currentRandomFactor").text(randomFactor);
-      }
-
-      function zoomIn() {
-        document.getElementById("gameContainer").style.width = "100%"
-        document.getElementById("gameContainer").style.height = "100%";
-        document.getElementById("zoomInGameScreenInput").disabled = true;
-        document.getElementById("zoomOutGameScreenInput").disabled = false; 
-        document.getElementById("zoomInGameScreenInput2").disabled = true;
-        document.getElementById("zoomOutGameScreenInput2").disabled = false;
-        document.getElementById("loadButtonGroup").style.width = "1200px";
-      }
-
-      function zoomOut() {
-        var gameContainerWidth = document.getElementById("gameContainer").style.width;
-        var gameContainerHeight = document.getElementById("gameContainer").style.height;
-        document.getElementById("gameContainer").style.width = "50%"
-        document.getElementById("gameContainer").style.height = "50%"
-        document.getElementById("zoomInGameScreenInput").disabled = false; 
-        document.getElementById("zoomOutGameScreenInput").disabled = true;
-        document.getElementById("zoomInGameScreenInput2").disabled = false; 
-        document.getElementById("zoomOutGameScreenInput2").disabled = true; 
-        document.getElementById("loadButtonGroup").style.width = "900px";
-      }
-
-      function controlAutoPilot() {
-        if (autoPilot) {
-          autoPilot = false;
-          $("#controlAutoPilotButton").text("Start");
-        } else {
-          autoPilot = true;
-          $("#controlAutoPilotButton").text("Stop");
-        }
-      }
-
-      function setLogConsole() {
-        // chaos_program_screen.style.display = "none";
-        // programming_mode_buttons.style.display = "none"; 
-        // game_screen.style.display = "none";
-        // game_buttons.style.display = "none";
-        // game_mode_switch = false;
-        //$("#programmingModeButton").text("Enable Prog. Mode");
-
-        if (log_tail_switch) {
-          $("#logConsoleButton").text("Start Logs Tail");
-          $('#alert_placeholder3').replaceWith(alert_div_webtail + 'Stopping log tail</div>');
-          log_tail_switch = false;
-          disableLogTail();
-        } else {
-          $('#alert_placeholder3').replaceWith(alert_div_webtail + 'Starting log tail</div>');
-          $("#logConsoleButton").text("Stop Logs Tail");
-          log_tail_switch = true;
-          log_tail_div.style.display = "block";
-          log_tail_screen.style.display = "block"
-          setLogRegex();
-          enableLogTail();
-        }
-      }
-
-      function startGameMode() {
-        if (game_mode_switch) {
-          game_mode_switch = false;
-          $("#gameModeButton").text("Enable Game Mode");
-        } else {
-          game_mode_switch = true;
-          document.getElementById("gameContainer").style.width = "50%";
-          document.getElementById("gameContainer").style.height = "50%";
-          //document.getElementById("loadButtonGroup").style.width = "650px";
-          $("#gameModeButton").text("Disable Game Mode");
-          $("#programmingModeButton").text("Enable Prog. Mode");
-          programming_mode_switch = false;
-        }
-        if (game_buttons.style.display === "none") {
-          game_buttons.style.display = "block";
-        } else {
-          game_buttons.style.display = "none";
-        }
-        if (game_screen.style.display === "none") {
-          game_screen.style.display = "block";
-        } else {
-          game_screen.style.display = "none";
-        }
-        chaos_program_screen.style.display = "none";
-        programming_mode_buttons.style.display = "none";
-      }
-
-      function startProgrammingMode() {
-        if (programming_mode_switch) {
-          programming_mode_switch = false;
-          $("#programmingModeButton").text("Enable Prog. Mode");
-        } else {
-          document.getElementById("gameContainer").style.width = "100%";
-          document.getElementById("gameContainer").style.height = "100%";
-          document.getElementById("loadButtonGroup").style.width = "1250px";
-
-          programming_mode_switch = true;
-          game_mode_switch = false;
-          $("#gameModeButton").text("Enable Game Mode");
-          $("#programmingModeButton").text("Disable Prog. Mode");
-        }
-        if (chaos_program_screen.style.display === "none") {
-          chaos_program_screen.style.display = "block";
-        } else {
-          chaos_program_screen.style.display = "none";
-        }
-        if (programming_mode_buttons.style.display === "none") {
-            programming_mode_buttons.style.display = "block";
-        } else {
-          programming_mode_buttons.style.display = "none";
-        }
-        game_buttons.style.display = "none";
-        game_screen.style.display = "none";
-      }
-
-      function showSpecialKeys() {
-        $('#showSpecialKeysModal').modal('show');
-        modal_opened = true;
-      }
-
-      function showCurrentChaosContainer() {
-        getCurrentChaosContainer();
-        $('#currentChaosContainerModal').modal('show');
-        modal_opened = true;
-      }
-
-      function closeCurrentChaosJobModal() {
-        $('#currentChaosContainerModal').modal('hide');
-        modal_opened = false;
-      }
-
-      function showSetCurrentChaosContainer() {
-        $('#alert_placeholder2').text('');
-        getCurrentChaosContainer();
-        $('#setChaosContainerModal').modal('show');
-        modal_opened = true;
-      }
-
-      function closeSetChaosContainerModal() {
-        $('#setChaosContainerModal').modal('hide');
-        modal_opened = false;
-      }
-
-      function closeSpecialKeysModal() {
-        $('#showSpecialKeysModal').modal('hide');
-        modal_opened = false;
-      }
-
-      function closeKubeLinterModal() {
-        $('#kubeLinterModal').modal('hide');
-        modal_opened = false;
-      }
-
-      $('textarea').on('input', function() {
-        $('#alert_placeholder2').text('');
-      });
-
-    </script>
   </body>
 </html>
diff --git a/html5/kubeinvaders.js b/html5/kubeinvaders.js
index 87727e1..caa6fe3 100644
--- a/html5/kubeinvaders.js
+++ b/html5/kubeinvaders.js
@@ -992,4 +992,16 @@ window.setInterval(function backgroundTasks() {
 
 getEndpoint();
 getNamespaces();
-getSavedPresets()
+getSavedPresets();
+// document.getElementById("gameContainer").style.display = "none";
+// document.getElementById("metricsPresetsRow").style.display = "none"
+
+document.getElementById("gameContainer").style.visibility = "hidden";
+document.getElementById("metricsPresetsRow").style.visibility = "hidden";
+document.getElementById("gameContainer").style.opacity = 0;
+document.getElementById("metricsPresetsRow").style.opacity = 0;
+
+document.getElementById("gameContainer").style.visibility = "visible";
+document.getElementById("metricsPresetsRow").style.visibility = "visible";
+document.getElementById("gameContainer").style.opacity = 1;
+document.getElementById("metricsPresetsRow").style.opacity = 1;
\ No newline at end of file
diff --git a/html5/style.css b/html5/style.css
new file mode 100644
index 0000000..57d41be
--- /dev/null
+++ b/html5/style.css
@@ -0,0 +1,83 @@
+.transition {
+  visibility: hidden;
+  opacity: 0;
+  transition: visibility 0s, opacity 1.0s linear;
+}
+
+.custom-btn-group {
+  margin-top: 2%;
+  border: 5px solid #b2afaf;
+  border-radius: 5px;
+  -moz-border-radius: 15px;
+  -webkit-border-radius: 15px;
+  padding: 5px;
+  border-image-slice: 5;    
+}
+
+.logtail-group {
+  margin-top: 0%;
+  border: 5px solid #b2afaf;
+  border-radius: 5px;
+  -moz-border-radius: 15px;
+  -webkit-border-radius: 15px;
+  padding: 5px;
+  border-image-slice: 5;    
+}
+
+.chaos-prog-area {
+  border: 5px solid #b2afaf;
+  border-radius: 5px;
+  -moz-border-radius: 15px;
+  -webkit-border-radius: 15px;
+  padding: 5px;
+  border-image-slice: 5;
+}
+
+.btn-light  {
+  border-color: #000000;
+}
+
+.btn-light:hover, .btn-light:focus, .btn-light:active, .btn-light.active, .open .dropdown-toggle.btn-default {
+  background-color: #06812f;
+  color:#FFF;
+  border-color: #000000;
+}
+
+.btn-light-saved {
+  color: #fff;
+  background-color: #771996;
+  border-width: 1.5px;
+  border-color: #000000;
+}
+
+.btn-light:hover {
+  transform: scale(1.05);
+}
+
+@font-face {
+  font-family: pixel;
+  src: url('./fonts/pixel.otf');
+  font-size-adjust: inherit;
+}
+
+body {
+  background-color: #ffffff;
+}
+
+.modal-content {
+  background-color: #ffffff;
+}
+
+.modal-content {
+  background-color: #ffffff;
+}
+
+.modal-dialog {
+  background-color: #ffffff;
+}
+
+div {
+  font-family: pixel;
+}
+
+canvas { background: #161616 ; display: block; margin: 0 auto; border:1px solid #ffffff;}
\ No newline at end of file
diff --git a/html5/utils.js b/html5/utils.js
new file mode 100644
index 0000000..4d88e43
--- /dev/null
+++ b/html5/utils.js
@@ -0,0 +1,196 @@
+loadPresetsCodeJson = `{
+    "cassandra": "ZnJvbSBjYXNzYW5kcmEuY2x1c3RlciBpbXBvcnQgQ2x1c3Rlcgpmcm9tIHJhbmRvbSBpbXBvcnQgcmFuZGludAppbXBvcnQgdGltZQoKZGVmIG1haW4oKToKICAgIGNsdXN0ZXIgPSBDbHVzdGVyKFsnMTI3LjAuMC4xJ10pCiAgICBzZXNzaW9uID0gY2x1c3Rlci5jb25uZWN0KCkKCiAgICBzZXNzaW9uLmV4ZWN1dGUoIkNSRUFURSBLRVlTUEFDRSBJRiBOT1QgRVhJU1RTIHRlc3QgV0lUSCBSRVBMSUNBVElPTiA9IHsgJ2NsYXNzJzogJ1NpbXBsZVN0cmF0ZWd5JywgJ3JlcGxpY2F0aW9uX2ZhY3Rvcic6IDEgfSIpCiAgICBzZXNzaW9uLmV4ZWN1dGUoIkNSRUFURSBUQUJMRSBJRiBOT1QgRVhJU1RTIHRlc3QubWVzc2FnZXMgKGlkIGludCBQUklNQVJZIEtFWSwgbWVzc2FnZSB0ZXh0KSIpCgogICAgZm9yIGkgaW4gcmFuZ2UoMTAwMCk6CiAgICAgICAgc2Vzc2lvbi5leGVjdXRlKCJJTlNFUlQgSU5UTyB0ZXN0Lm1lc3NhZ2VzIChpZCwgbWVzc2FnZSkgVkFMVUVTICglcywgJyVzJykiICUgKGksIHN0cihyYW5kaW50KDAsIDEwMDApKSkpCiAgICAgICAgdGltZS5zbGVlcCgwLjAwMSkKCiAgICBjbHVzdGVyLnNodXRkb3duKCkKCmlmIF9fbmFtZV9fID09ICJfX21haW5fXyI6CiAgICBtYWluKCk=",
+    "consul": "aW1wb3J0IHRpbWUKaW1wb3J0IGNvbnN1bAoKIyBDb25uZWN0IHRvIHRoZSBDb25zdWwgY2x1c3RlcgpjbGllbnQgPSBjb25zdWwuQ29uc3VsKCkKCiMgQ29udGludW91c2x5IHJlZ2lzdGVyIGFuZCBkZXJlZ2lzdGVyIGEgc2VydmljZQp3aGlsZSBUcnVlOgogICAgIyBSZWdpc3RlciB0aGUgc2VydmljZQogICAgY2xpZW50LmFnZW50LnNlcnZpY2UucmVnaXN0ZXIoCiAgICAgICAgInN0cmVzcy10ZXN0LXNlcnZpY2UiLAogICAgICAgIHBvcnQ9ODA4MCwKICAgICAgICB0YWdzPVsic3RyZXNzLXRlc3QiXSwKICAgICAgICBjaGVjaz1jb25zdWwuQ2hlY2soKS50Y3AoImxvY2FsaG9zdCIsIDgwODAsICIxMHMiKQogICAgKQoKICAgICMgRGVyZWdpc3RlciB0aGUgc2VydmljZQogICAgY2xpZW50LmFnZW50LnNlcnZpY2UuZGVyZWdpc3Rlcigic3RyZXNzLXRlc3Qtc2VydmljZSIpCgogICAgdGltZS5zbGVlcCgxKQoK",
+    "elasticsearch": "aW1wb3J0IHRpbWUKZnJvbSBlbGFzdGljc2VhcmNoIGltcG9ydCBFbGFzdGljc2VhcmNoCgojIENvbm5lY3QgdG8gdGhlIEVsYXN0aWNzZWFyY2ggY2x1c3RlcgplcyA9IEVsYXN0aWNzZWFyY2goWyJsb2NhbGhvc3QiXSkKCiMgQ29udGludW91c2x5IGluZGV4IGFuZCBkZWxldGUgZG9jdW1lbnRzCndoaWxlIFRydWU6CiAgICAjIEluZGV4IGEgZG9jdW1lbnQKICAgIGVzLmluZGV4KGluZGV4PSJ0ZXN0LWluZGV4IiwgZG9jX3R5cGU9InRlc3QtdHlwZSIsIGlkPTEsIGJvZHk9eyJ0ZXN0IjogInRlc3QifSkKCiAgICAjIERlbGV0ZSB0aGUgZG9jdW1lbnQKICAgIGVzLmRlbGV0ZShpbmRleD0idGVzdC1pbmRleCIsIGRvY190eXBlPSJ0ZXN0LXR5cGUiLCBpZD0xKQoKICAgIHRpbWUuc2xlZXAoMSkKCg==",
+    "etcd3": "aW1wb3J0IHRpbWUKaW1wb3J0IGV0Y2QzCgojIENvbm5lY3QgdG8gdGhlIGV0Y2QzIGNsdXN0ZXIKY2xpZW50ID0gZXRjZDMuY2xpZW50KCkKCiMgQ29udGludW91c2x5IHNldCBhbmQgZGVsZXRlIGtleXMKd2hpbGUgVHJ1ZToKICAgICMgU2V0IGEga2V5CiAgICBjbGllbnQucHV0KCIvc3RyZXNzLXRlc3Qta2V5IiwgInN0cmVzcyB0ZXN0IHZhbHVlIikKCiAgICAjIERlbGV0ZSB0aGUga2V5CiAgICBjbGllbnQuZGVsZXRlKCIvc3RyZXNzLXRlc3Qta2V5IikKCiAgICB0aW1lLnNsZWVwKDEpCgo=",
+    "gitlab": "aW1wb3J0IGdpdGxhYgppbXBvcnQgcmVxdWVzdHMKaW1wb3J0IHRpbWUKCmdsID0gZ2l0bGFiLkdpdGxhYignaHR0cHM6Ly9naXRsYWIuZXhhbXBsZS5jb20nLCBwcml2YXRlX3Rva2VuPSdteV9wcml2YXRlX3Rva2VuJykKCmRlZiBjcmVhdGVfcHJvamVjdCgpOgogICAgcHJvamVjdCA9IGdsLnByb2plY3RzLmNyZWF0ZSh7J25hbWUnOiAnTXkgUHJvamVjdCd9KQogICAgcHJpbnQoIkNyZWF0ZWQgcHJvamVjdDogIiwgcHJvamVjdC5uYW1lKQoKZGVmIG1haW4oKToKICAgIGZvciBpIGluIHJhbmdlKDEwMDApOgogICAgICAgIGNyZWF0ZV9wcm9qZWN0KCkKICAgICAgICB0aW1lLnNsZWVwKDAuMDAxKQoKaWYgX19uYW1lX18gPT0gIl9fbWFpbl9fIjoKICAgIG1haW4oKQ==",
+    "http": "aW1wb3J0IHRpbWUKaW1wb3J0IHJlcXVlc3RzCgojIFNldCB1cCB0aGUgVVJMIHRvIHNlbmQgcmVxdWVzdHMgdG8KdXJsID0gJ2h0dHA6Ly9sb2NhbGhvc3Q6ODA4MC8nCgojIFNldCB1cCB0aGUgbnVtYmVyIG9mIHJlcXVlc3RzIHRvIHNlbmQKbnVtX3JlcXVlc3RzID0gMTAwMDAKCiMgU2V0IHVwIHRoZSBwYXlsb2FkIHRvIHNlbmQKcGF5bG9hZCA9IHsna2V5JzogJ3ZhbHVlJ30KCiMgU2VuZCB0aGUgcmVxdWVzdHMKc3RhcnRfdGltZSA9IHRpbWUudGltZSgpCmZvciBpIGluIHJhbmdlKG51bV9yZXF1ZXN0cyk6CiAgICByZXF1ZXN0cy5wb3N0KHVybCwganNvbj1wYXlsb2FkKQplbmRfdGltZSA9IHRpbWUudGltZSgpCgojIENhbGN1bGF0ZSB0aGUgdGhyb3VnaHB1dAp0aHJvdWdocHV0ID0gbnVtX3JlcXVlc3RzIC8gKGVuZF90aW1lIC0gc3RhcnRfdGltZSkKcHJpbnQoZidUaHJvdWdocHV0OiB7dGhyb3VnaHB1dH0gcmVxdWVzdHMvc2Vjb25kJykKCg==",
+    "jira": "aW1wb3J0IHRpbWUKZnJvbSBqaXJhIGltcG9ydCBKSVJBCgojIENvbm5lY3QgdG8gdGhlIEppcmEgaW5zdGFuY2UKamlyYSA9IEpJUkEoCiAgICBzZXJ2ZXI9Imh0dHBzOi8vamlyYS5leGFtcGxlLmNvbSIsCiAgICBiYXNpY19hdXRoPSgidXNlciIsICJwYXNzd29yZCIpCikKCiMgQ29udGludW91c2x5IGNyZWF0ZSBhbmQgZGVsZXRlIGlzc3Vlcwp3aGlsZSBUcnVlOgogICAgIyBDcmVhdGUgYW4gaXNzdWUKICAgIGlzc3VlID0gamlyYS5jcmVhdGVfaXNzdWUoCiAgICAgICAgcHJvamVjdD0iUFJPSkVDVCIsCiAgICAgICAgc3VtbWFyeT0iU3RyZXNzIHRlc3QgaXNzdWUiLAogICAgICAgIGRlc2NyaXB0aW9uPSJUaGlzIGlzIGEgc3RyZXNzIHRlc3QgaXNzdWUuIiwKICAgICAgICBpc3N1ZXR5cGU9eyJuYW1lIjogIkJ1ZyJ9CiAgICApCgogICAgIyBEZWxldGUgdGhlIGlzc3VlCiAgICBqaXJhLmRlbGV0ZV9pc3N1ZShpc3N1ZSkKCiAgICB0aW1lLnNsZWVwKDEpCgo=",
+    "kafka": "aW1wb3J0IHRpbWUKaW1wb3J0IHJhbmRvbQoKZnJvbSBrYWZrYSBpbXBvcnQgS2Fma2FQcm9kdWNlcgoKIyBTZXQgdXAgdGhlIEthZmthIHByb2R1Y2VyCnByb2R1Y2VyID0gS2Fma2FQcm9kdWNlcihib290c3RyYXBfc2VydmVycz1bJ2xvY2FsaG9zdDo5MDkyJ10pCgojIFNldCB1cCB0aGUgdG9waWMgdG8gc2VuZCBtZXNzYWdlcyB0bwp0b3BpYyA9ICd0ZXN0JwoKIyBTZXQgdXAgdGhlIG51bWJlciBvZiBtZXNzYWdlcyB0byBzZW5kCm51bV9tZXNzYWdlcyA9IDEwMDAwCgojIFNldCB1cCB0aGUgcGF5bG9hZCB0byBzZW5kCnBheWxvYWQgPSBiJ2EnICogMTAwMDAwMAoKIyBTZW5kIHRoZSBtZXNzYWdlcwpzdGFydF90aW1lID0gdGltZS50aW1lKCkKZm9yIGkgaW4gcmFuZ2UobnVtX21lc3NhZ2VzKToKICAgIHByb2R1Y2VyLnNlbmQodG9waWMsIHBheWxvYWQpCmVuZF90aW1lID0gdGltZS50aW1lKCkKCiMgQ2FsY3VsYXRlIHRoZSB0aHJvdWdocHV0CnRocm91Z2hwdXQgPSBudW1fbWVzc2FnZXMgLyAoZW5kX3RpbWUgLSBzdGFydF90aW1lKQpwcmludChmJ1Rocm91Z2hwdXQ6IHt0aHJvdWdocHV0fSBtZXNzYWdlcy9zZWNvbmQnKQoKIyBGbHVzaCBhbmQgY2xvc2UgdGhlIHByb2R1Y2VyCnByb2R1Y2VyLmZsdXNoKCkKcHJvZHVjZXIuY2xvc2UoKQo=",
+    "kubernetes": "aW1wb3J0IHRpbWUKaW1wb3J0IGt1YmVybmV0ZXMKCiMgQ3JlYXRlIGEgS3ViZXJuZXRlcyBjbGllbnQKY2xpZW50ID0ga3ViZXJuZXRlcy5jbGllbnQuQ29yZVYxQXBpKCkKCiMgQ29udGludW91c2x5IGNyZWF0ZSBhbmQgZGVsZXRlIHBvZHMKd2hpbGUgVHJ1ZToKICAgICMgQ3JlYXRlIGEgcG9kCiAgICBwb2QgPSBrdWJlcm5ldGVzLmNsaWVudC5WMVBvZCgKICAgICAgICBtZXRhZGF0YT1rdWJlcm5ldGVzLmNsaWVudC5WMU9iamVjdE1ldGEobmFtZT0ic3RyZXNzLXRlc3QtcG9kIiksCiAgICAgICAgc3BlYz1rdWJlcm5ldGVzLmNsaWVudC5WMVBvZFNwZWMoCiAgICAgICAgICAgIGNvbnRhaW5lcnM9W2t1YmVybmV0ZXMuY2xpZW50LlYxQ29udGFpbmVyKAogICAgICAgICAgICAgICAgbmFtZT0ic3RyZXNzLXRlc3QtY29udGFpbmVyIiwKICAgICAgICAgICAgICAgIGltYWdlPSJuZ2lueDpsYXRlc3QiCiAgICAgICAgICAgICldCiAgICAgICAgKQogICAgKQogICAgY2xpZW50LmNyZWF0ZV9uYW1lc3BhY2VkX3BvZChuYW1lc3BhY2U9ImRlZmF1bHQiLCBib2R5PXBvZCkKCiAgICAjIERlbGV0ZSB0aGUgcG9kCiAgICBjbGllbnQuZGVsZXRlX25hbWVzcGFjZWRfcG9kKG5hbWU9InN0cmVzcy10ZXN0LXBvZCIsIG5hbWVzcGFjZT0iZGVmYXVsdCIpCgogICAgdGltZS5zbGVlcCgxKQoK",
+    "mongodb": "aW1wb3J0IHRpbWUKaW1wb3J0IHJhbmRvbQpmcm9tIHB5bW9uZ28gaW1wb3J0IE1vbmdvQ2xpZW50CgojIFNldCB1cCB0aGUgTW9uZ29EQiBjbGllbnQKY2xpZW50ID0gTW9uZ29DbGllbnQoJ21vbmdvZGI6Ly9sb2NhbGhvc3Q6MjcwMTcvJykKCiMgU2V0IHVwIHRoZSBkYXRhYmFzZSBhbmQgY29sbGVjdGlvbiB0byB1c2UKZGIgPSBjbGllbnRbJ3Rlc3QnXQpjb2xsZWN0aW9uID0gZGJbJ3Rlc3QnXQoKIyBTZXQgdXAgdGhlIG51bWJlciBvZiBkb2N1bWVudHMgdG8gaW5zZXJ0Cm51bV9kb2N1bWVudHMgPSAxMDAwMAoKIyBTZXQgdXAgdGhlIHBheWxvYWQgdG8gaW5zZXJ0CnBheWxvYWQgPSB7J2tleSc6ICdhJyAqIDEwMDAwMDB9CgojIEluc2VydCB0aGUgZG9jdW1lbnRzCnN0YXJ0X3RpbWUgPSB0aW1lLnRpbWUoKQpmb3IgaSBpbiByYW5nZShudW1fZG9jdW1lbnRzKToKICAgIGNvbGxlY3Rpb24uaW5zZXJ0X29uZShwYXlsb2FkKQplbmRfdGltZSA9IHRpbWUudGltZSgpCgojIENhbGN1bGF0ZSB0aGUgdGhyb3VnaHB1dAp0aHJvdWdocHV0ID0gbnVtX2RvY3VtZW50cyAvIChlbmRfdGltZSAtIHN0YXJ0X3RpbWUpCnByaW50KGYnVGhyb3VnaHB1dDoge3Rocm91Z2hwdXR9IGRvY3VtZW50cy9zZWNvbmQnKQoKIyBDbG9zZSB0aGUgY2xpZW50CmNsaWVudC5jbG9zZSgpCgo=",
+    "mysql": "aW1wb3J0IHRpbWUKaW1wb3J0IG15c3FsLmNvbm5lY3RvcgoKIyBDb25uZWN0IHRvIHRoZSBNeVNRTCBkYXRhYmFzZQpjbnggPSBteXNxbC5jb25uZWN0b3IuY29ubmVjdCgKICAgIGhvc3Q9ImxvY2FsaG9zdCIsCiAgICB1c2VyPSJyb290IiwKICAgIHBhc3N3b3JkPSJwYXNzd29yZCIsCiAgICBkYXRhYmFzZT0idGVzdCIKKQpjdXJzb3IgPSBjbnguY3Vyc29yKCkKCiMgQ29udGludW91c2x5IGluc2VydCByb3dzIGludG8gdGhlICJ0ZXN0X3RhYmxlIiB0YWJsZQp3aGlsZSBUcnVlOgogICAgY3Vyc29yLmV4ZWN1dGUoIklOU0VSVCBJTlRPIHRlc3RfdGFibGUgKGNvbDEsIGNvbDIpIFZBTFVFUyAoJXMsICVzKSIsICgxLCAyKSkKICAgIGNueC5jb21taXQoKQogICAgdGltZS5zbGVlcCgxKQoKIyBDbG9zZSB0aGUgZGF0YWJhc2UgY29ubmVjdGlvbgpjbnguY2xvc2UoKQoK",
+    "nomad": "aW1wb3J0IHRpbWUKaW1wb3J0IG5vbWFkCgojIENyZWF0ZSBhIE5vbWFkIGNsaWVudApjbGllbnQgPSBub21hZC5Ob21hZCgpCgojIENyZWF0ZSBhIGJhdGNoIG9mIGpvYnMgdG8gc3VibWl0IHRvIE5vbWFkCmpvYnMgPSBbewogICAgIk5hbWUiOiAic3RyZXNzLXRlc3Qtam9iIiwKICAgICJUeXBlIjogImJhdGNoIiwKICAgICJEYXRhY2VudGVycyI6IFsiZGMxIl0sCiAgICAiVGFza0dyb3VwcyI6IFt7CiAgICAgICAgIk5hbWUiOiAic3RyZXNzLXRlc3QtdGFzay1ncm91cCIsCiAgICAgICAgIlRhc2tzIjogW3sKICAgICAgICAgICAgIk5hbWUiOiAic3RyZXNzLXRlc3QtdGFzayIsCiAgICAgICAgICAgICJEcml2ZXIiOiAicmF3X2V4ZWMiLAogICAgICAgICAgICAiQ29uZmlnIjogewogICAgICAgICAgICAgICAgImNvbW1hbmQiOiAic2xlZXAgMTAiCiAgICAgICAgICAgIH0sCiAgICAgICAgICAgICJSZXNvdXJjZXMiOiB7CiAgICAgICAgICAgICAgICAiQ1BVIjogNTAwLAogICAgICAgICAgICAgICAgIk1lbW9yeU1CIjogNTEyCiAgICAgICAgICAgIH0KICAgICAgICB9XQogICAgfV0KfV0KCiMgQ29udGludW91c2x5IHN1Ym1pdCB0aGUgYmF0Y2ggb2Ygam9icyB0byBOb21hZAp3aGlsZSBUcnVlOgogICAgZm9yIGpvYiBpbiBqb2JzOgogICAgICAgIGNsaWVudC5qb2JzLmNyZWF0ZShqb2IpCiAgICB0aW1lLnNsZWVwKDEpCgo=",
+    "postgresql": "aW1wb3J0IHRpbWUKaW1wb3J0IHJhbmRvbQppbXBvcnQgcHN5Y29wZzIKCiMgU2V0IHVwIHRoZSBjb25uZWN0aW9uIHBhcmFtZXRlcnMKcGFyYW1zID0gewogICAgJ2hvc3QnOiAnbG9jYWxob3N0JywKICAgICdwb3J0JzogJzU0MzInLAogICAgJ2RhdGFiYXNlJzogJ3Rlc3QnLAogICAgJ3VzZXInOiAncG9zdGdyZXMnLAogICAgJ3Bhc3N3b3JkJzogJ3Bhc3N3b3JkJwp9CgojIENvbm5lY3QgdG8gdGhlIGRhdGFiYXNlCmNvbm4gPSBwc3ljb3BnMi5jb25uZWN0KCoqcGFyYW1zKQoKIyBTZXQgdXAgdGhlIGN1cnNvcgpjdXIgPSBjb25uLmN1cnNvcigpCgojIFNldCB1cCB0aGUgdGFibGUgYW5kIHBheWxvYWQgdG8gaW5zZXJ0CnRhYmxlX25hbWUgPSAndGVzdCcKcGF5bG9hZCA9ICdhJyAqIDEwMDAwMDAKCiMgU2V0IHVwIHRoZSBudW1iZXIgb2Ygcm93cyB0byBpbnNlcnQKbnVtX3Jvd3MgPSAxMDAwMAoKIyBJbnNlcnQgdGhlIHJvd3MKc3RhcnRfdGltZSA9IHRpbWUudGltZSgpCmZvciBpIGluIHJhbmdlKG51bV9yb3dzKToKICAgIGN1ci5leGVjdXRlKGYiSU5TRVJUIElOVE8ge3RhYmxlX25hbWV9IChjb2wpIFZBTFVFUyAoJ3twYXlsb2FkfScpIikKY29ubi5jb21taXQoKQplbmRfdGltZSA9IHRpbWUudGltZSgpCgojIENhbGN1bGF0ZSB0aGUgdGhyb3VnaHB1dAp0aHJvdWdocHV0ID0gbnVtX3Jvd3MgLyAoZW5kX3RpbWUgLSBzdGFydF90aW1lKQpwcmludChmJ1Rocm91Z2hwdXQ6IHt0aHJvdWdocHV0fSByb3dzL3NlY29uZCcpCgojIENsb3NlIHRoZSBjdXJzb3IgYW5kIGNvbm5lY3Rpb24KY3VyLmNsb3NlKCkKY29ubi5jbG9zZSgpCgo=",
+    "prometheus": "aW1wb3J0IHRpbWUKaW1wb3J0IHJhbmRvbQpmcm9tIHByb21ldGhldXNfY2xpZW50IGltcG9ydCBDb2xsZWN0b3JSZWdpc3RyeSwgR2F1Z2UsIHB1c2hfdG9fZ2F0ZXdheQoKIyBTZXQgdXAgdGhlIG1ldHJpY3MgcmVnaXN0cnkKcmVnaXN0cnkgPSBDb2xsZWN0b3JSZWdpc3RyeSgpCgojIFNldCB1cCB0aGUgbWV0cmljIHRvIHB1c2gKZ2F1Z2UgPSBHYXVnZSgndGVzdF9nYXVnZScsICdBIHRlc3QgZ2F1Z2UnLCByZWdpc3RyeT1yZWdpc3RyeSkKCiMgU2V0IHVwIHRoZSBwdXNoIGdhdGV3YXkgVVJMCnB1c2hfZ2F0ZXdheSA9ICdodHRwOi8vbG9jYWxob3N0OjkwOTEnCgojIFNldCB1cCB0aGUgbnVtYmVyIG9mIHB1c2hlcyB0byBzZW5kCm51bV9wdXNoZXMgPSAxMDAwMAoKIyBTZXQgdXAgdGhlIG1ldHJpYyB2YWx1ZSB0byBwdXNoCnZhbHVlID0gcmFuZG9tLnJhbmRvbSgpCgojIFB1c2ggdGhlIG1ldHJpYwpzdGFydF90aW1lID0gdGltZS50aW1lKCkKZm9yIGkgaW4gcmFuZ2UobnVtX3B1c2hlcyk6CiAgICBnYXVnZS5zZXQodmFsdWUpCiAgICBwdXNoX3RvX2dhdGV3YXkocHVzaF9nYXRld2F5LCBqb2I9J3Rlc3Rfam9iJywgcmVnaXN0cnk9cmVnaXN0cnkpCmVuZF90aW1lID0gdGltZS50aW1lKCkKCiMgQ2FsY3VsYXRlIHRoZSB0aHJvdWdocHV0CnRocm91Z2hwdXQgPSBudW1fcHVzaGVzIC8gKGVuZF90aW1lIC0gc3RhcnRfdGltZSkKcHJpbnQoZidUaHJvdWdocHV0OiB7dGhyb3VnaHB1dH0gcHVzaGVzL3NlY29uZCcpCgo=",
+    "rabbit": "aW1wb3J0IHBpa2EKaW1wb3J0IHRpbWUKCmRlZiBzZW5kX21lc3NhZ2UoY2hhbm5lbCwgbWVzc2FnZSk6CiAgICBjaGFubmVsLmJhc2ljX3B1Ymxpc2goZXhjaGFuZ2U9JycsIHJvdXRpbmdfa2V5PSd0ZXN0X3F1ZXVlJywgYm9keT1tZXNzYWdlKQogICAgcHJpbnQoIlNlbnQgbWVzc2FnZTogIiwgbWVzc2FnZSkKCmRlZiBtYWluKCk6CiAgICBjb25uZWN0aW9uID0gcGlrYS5CbG9ja2luZ0Nvbm5lY3Rpb24ocGlrYS5Db25uZWN0aW9uUGFyYW1ldGVycygnbG9jYWxob3N0JykpCiAgICBjaGFubmVsID0gY29ubmVjdGlvbi5jaGFubmVsKCkKICAgIGNoYW5uZWwucXVldWVfZGVjbGFyZShxdWV1ZT0ndGVzdF9xdWV1ZScpCgogICAgZm9yIGkgaW4gcmFuZ2UoMTAwMCk6CiAgICAgICAgc2VuZF9tZXNzYWdlKGNoYW5uZWwsIHN0cihpKSkKICAgICAgICB0aW1lLnNsZWVwKDAuMDAxKQoKICAgIGNvbm5lY3Rpb24uY2xvc2UoKQoKaWYgX19uYW1lX18gPT0gIl9fbWFpbl9fIjoKICAgIG1haW4oKQ==",
+    "SSH": "aW1wb3J0IHBhcmFtaWtvCgojIERlZmluZSBzZXJ2ZXJzIGFycmF5CnNlcnZlcnMgPSBbJ3NlcnZlcjEnLCAnc2VydmVyMicsICdzZXJ2ZXIzJ10KCmZvciBzZXJ2ZXIgaW4gc2VydmVyczoKICAgIHB1YmxpY19rZXkgPSBwYXJhbWlrby5SU0FLZXkoZGF0YT1iJ3lvdXItcHVibGljLWtleS1zdHJpbmcnKQogICAgc3NoID0gcGFyYW1pa28uU1NIQ2xpZW50KCkKICAgIHNzaC5zZXRfbWlzc2luZ19ob3N0X2tleV9wb2xpY3kocGFyYW1pa28uQXV0b0FkZFBvbGljeSgpKQogICAgc3NoLmNvbm5lY3QoaG9zdG5hbWU9J3lvdXItc2VydmVyLW5hbWUnLCB1c2VybmFtZT0neW91ci11c2VybmFtZScsIHBrZXk9cHVibGljX2tleSkKICAgIHN0ZGluLCBzdGRvdXQsIHN0ZGVyciA9IHNzaC5leGVjX2NvbW1hbmQoJ3lvdXItY29tbWFuZCcpCiAgICBwcmludChzdGRvdXQucmVhZCgpKQogICAgc3NoLmNsb3NlKCkK",
+    "vault": "aW1wb3J0IHRpbWUKaW1wb3J0IGh2YWMKCiMgQ29ubmVjdCB0byB0aGUgVmF1bHQgaW5zdGFuY2UKY2xpZW50ID0gaHZhYy5DbGllbnQoKQpjbGllbnQuYXV0aF9hcHByb2xlKGFwcHJvbGVfaWQ9ImFwcHJvbGUtaWQiLCBzZWNyZXRfaWQ9InNlY3JldC1pZCIpCgojIENvbnRpbnVvdXNseSByZWFkIGFuZCB3cml0ZSBzZWNyZXRzCndoaWxlIFRydWU6CiAgICAjIFdyaXRlIGEgc2VjcmV0CiAgICBjbGllbnQud3JpdGUoInNlY3JldC9zdHJlc3MtdGVzdCIsIHZhbHVlPSJzZWNyZXQgdmFsdWUiKQoKICAgICMgUmVhZCB0aGUgc2VjcmV0CiAgICBjbGllbnQucmVhZCgic2VjcmV0L3N0cmVzcy10ZXN0IikKCiAgICB0aW1lLnNsZWVwKDEpCgo="
+  }`;
+
+  function closeSetLoadTestModal() {
+    $('#setLoadTestModal').modal('hide');
+    modal_opened = false;
+  }
+
+  function loadPreset(tool, lang) {
+    let decodedStringAtoB = "";
+    console.log("[GET-PRESETS] Loaded preset for " + tool);
+    loadPresetsCodeParsed = JSON.parse(loadPresetsCodeJson);
+    decodedStringAtoB = atob(loadPresetsCodeParsed[tool]);
+    latest_preset_name = tool;
+    latest_preset_lang = lang;
+    loadSavedPreset(tool, lang, decodedStringAtoB);
+    $("#presetLang").val(lang);
+    $("#presetName").val(tool);
+    $('#setLoadTestModal').modal('show');
+    modal_opened = true;
+    log_tail_switch = false;
+    log_tail_div.style.display = "none";
+    log_tail_screen.style.display = "none"
+    $("#logConsoleButton").text("Start Logs Tail");
+    if (programming_mode_switch == false) {
+      startProgrammingMode();
+    }
+  }
+
+  function changeRandomFactor() {
+    randomFactor = $("#randomFactorInput").val();
+    $("#currentRandomFactor").text(randomFactor);
+  }
+
+  function zoomIn() {
+    document.getElementById("gameContainer").style.width = "100%"
+    document.getElementById("gameContainer").style.height = "100%";
+    document.getElementById("zoomInGameScreenInput").disabled = true;
+    document.getElementById("zoomOutGameScreenInput").disabled = false; 
+    document.getElementById("zoomInGameScreenInput2").disabled = true;
+    document.getElementById("zoomOutGameScreenInput2").disabled = false;
+    document.getElementById("loadButtonGroup").style.width = "1200px";
+  }
+
+  function zoomOut() {
+    var gameContainerWidth = document.getElementById("gameContainer").style.width;
+    var gameContainerHeight = document.getElementById("gameContainer").style.height;
+    document.getElementById("gameContainer").style.width = "50%"
+    document.getElementById("gameContainer").style.height = "50%"
+    document.getElementById("zoomInGameScreenInput").disabled = false; 
+    document.getElementById("zoomOutGameScreenInput").disabled = true;
+    document.getElementById("zoomInGameScreenInput2").disabled = false; 
+    document.getElementById("zoomOutGameScreenInput2").disabled = true; 
+    document.getElementById("loadButtonGroup").style.width = "900px";
+  }
+
+  function controlAutoPilot() {
+    if (autoPilot) {
+      autoPilot = false;
+      $("#controlAutoPilotButton").text("Start");
+    } else {
+      autoPilot = true;
+      $("#controlAutoPilotButton").text("Stop");
+    }
+  }
+
+  function setLogConsole() {
+    if (log_tail_switch) {
+      $("#logConsoleButton").text("Start Logs Tail");
+      $('#alert_placeholder3').replaceWith(alert_div_webtail + 'Stopping log tail</div>');
+      log_tail_switch = false;
+      disableLogTail();
+    } else {
+      $('#alert_placeholder3').replaceWith(alert_div_webtail + 'Starting log tail</div>');
+      $("#logConsoleButton").text("Stop Logs Tail");
+      log_tail_switch = true;
+      log_tail_div.style.display = "block";
+      log_tail_screen.style.display = "block"
+      setLogRegex();
+      enableLogTail();
+    }
+  }
+
+  function startGameMode() {
+    if (game_mode_switch) {
+      game_mode_switch = false;
+      $("#gameModeButton").text("Enable Game Mode");
+    } else {
+      game_mode_switch = true;
+      document.getElementById("gameContainer").style.width = "50%";
+      document.getElementById("gameContainer").style.height = "50%";
+      //document.getElementById("loadButtonGroup").style.width = "650px";
+      $("#gameModeButton").text("Disable Game Mode");
+      $("#programmingModeButton").text("Enable Prog. Mode");
+      programming_mode_switch = false;
+    }
+    if (game_buttons.style.display === "none") {
+      game_buttons.style.display = "block";
+    } else {
+      game_buttons.style.display = "none";
+    }
+    if (game_screen.style.display === "none") {
+      game_screen.style.display = "block";
+    } else {
+      game_screen.style.display = "none";
+    }
+    chaos_program_screen.style.display = "none";
+    programming_mode_buttons.style.display = "none";
+  }
+
+  function startProgrammingMode() {
+    if (programming_mode_switch) {
+      programming_mode_switch = false;
+      $("#programmingModeButton").text("Enable Prog. Mode");
+    } else {
+      document.getElementById("gameContainer").style.width = "100%";
+      document.getElementById("gameContainer").style.height = "100%";
+      document.getElementById("loadButtonGroup").style.width = "1250px";
+
+      programming_mode_switch = true;
+      game_mode_switch = false;
+      $("#gameModeButton").text("Enable Game Mode");
+      $("#programmingModeButton").text("Disable Prog. Mode");
+    }
+    if (chaos_program_screen.style.display === "none") {
+      chaos_program_screen.style.display = "block";
+    } else {
+      chaos_program_screen.style.display = "none";
+    }
+    if (programming_mode_buttons.style.display === "none") {
+        programming_mode_buttons.style.display = "block";
+    } else {
+      programming_mode_buttons.style.display = "none";
+    }
+    game_buttons.style.display = "none";
+    game_screen.style.display = "none";
+  }
+
+  function showSpecialKeys() {
+    $('#showSpecialKeysModal').modal('show');
+    modal_opened = true;
+  }
+
+  function showCurrentChaosContainer() {
+    getCurrentChaosContainer();
+    $('#currentChaosContainerModal').modal('show');
+    modal_opened = true;
+  }
+
+  function closeCurrentChaosJobModal() {
+    $('#currentChaosContainerModal').modal('hide');
+    modal_opened = false;
+  }
+
+  function showSetCurrentChaosContainer() {
+    $('#alert_placeholder2').text('');
+    getCurrentChaosContainer();
+    $('#setChaosContainerModal').modal('show');
+    modal_opened = true;
+  }
+
+  function closeSetChaosContainerModal() {
+    $('#setChaosContainerModal').modal('hide');
+    modal_opened = false;
+  }
+
+  function closeSpecialKeysModal() {
+    $('#showSpecialKeysModal').modal('hide');
+    modal_opened = false;
+  }
+
+  function closeKubeLinterModal() {
+    $('#kubeLinterModal').modal('hide');
+    modal_opened = false;
+  }
+
+//   $('textarea').on('input', function() {
+//     $('#alert_placeholder2').text('');
+//   });
\ No newline at end of file
