From d284b483efa316f4ad6e740f4583eeeff0a8d02f Mon Sep 17 00:00:00 2001
From: devengaging <devengaging@gmail.com>
Date: Thu, 4 Apr 2024 14:03:25 +0100
Subject: [PATCH] fix: border style

---
 html5/index.html | 10 +++----
 html5/style.css  | 73 ++++++++++++++++++++++++++++--------------------
 2 files changed, 47 insertions(+), 36 deletions(-)

diff --git a/html5/index.html b/html5/index.html
index 1454f81..833aab3 100644
--- a/html5/index.html
+++ b/html5/index.html
@@ -190,7 +190,7 @@
                       <div class="row">
                         <div class="col col-xl-10">
                           <label for="chaosReportProject">Project</label>
-                          <input type="text" id="chaosReportProject" value="" style="margin-bottom: 1%; width: 50%;">
+                          <input type="text" id="chaosReportProject" value="" style="margin-bottom: 1%;">
                         </div>
                       </div>
                       <div class="row">
@@ -261,7 +261,7 @@
             </div>
           </div>
         </div>
-        <div class="container" id="gameContainer" style="width: 50%; height: 50%;">
+        <div class="container" id="gameContainer">
             <!-- START FIRST ROW -->
             <div class="row custom-btn-group" style="margin-top: 2%;">
               <!-- START SWITCH BUTTONS FOR MODE (GAME, PROGRAMMING)-->
@@ -381,7 +381,7 @@
   
             <!-- START METRICS ROW -->
             <div class="row text-justify" align="center" id="metricsPresetsRow">
-              <div style="margin-top: 1%;" class="custom-btn-group text-justify" id="metricsGroup">
+              <div style="margin-top: 1%;" class="text-justify" id="metricsGroup">
   
                   <span style="color: #b2afaf;" class="text-kinv text-wrap" id="currentGameNamespaceLabel">Selected Namespace:&nbsp;&nbsp;<span id="currentGameNamespace" style="color: #3ac961;" class="text-break">NULL</span></span><br>
                   <span style="color: #b2afaf;" class="text-kinv" id="deletedPodsTotalText">Deleted Pods Total:&nbsp;&nbsp;<span id="deleted_pods_total" style="color: #3ac961">0</span></span><br>
@@ -498,7 +498,7 @@
             <!-- START GAME MODE SCREEN -->
             <div id="game-screen" style="display: none;">
               <div class="row" style="margin-top: 2%; display: none;" id="httpStatsCanvasDiv">
-                <div style="margin-top: 1%;" class="custom-btn-group text-justify" id="metricsGroup">
+                <div style="margin-top: 1%;" class="custom-btn-group text-justify" id="metricsGroup" style="width: 100%;">
                   <div class="table-responsive">
                     <table class="table" style="color:#b2afaf;">
                       <thead>
@@ -539,7 +539,7 @@
                 </div>
               </div>          
               <div class="row" style="margin-top: 2%;">
-                <canvas id="myCanvas" width="720" height="480" class="game-canvas custom-btn-group"></canvas>
+                <canvas id="myCanvas" width="720" height="480" class="game-canvas"></canvas>
               </div>
               <div class="row">
                 <div class="col text-center">
diff --git a/html5/style.css b/html5/style.css
index fb00468..3565501 100644
--- a/html5/style.css
+++ b/html5/style.css
@@ -8,36 +8,35 @@
 }
 
 @keyframes fadeIn {
-    from {
-        opacity: 0; /* Opacità iniziale */
-    }
-    to {
-        opacity: 1; /* Opacità finale */
-    }
+  from {
+    opacity: 0; /* Opacità iniziale */
+  }
+  to {
+    opacity: 1; /* Opacità finale */
+  }
 }
 
 /* #kinvBody {
   display: none;
 } */
 
-input[type="text"]
-{
-  font-family: 'Courier New', Courier, monospace;
+input[type="text"] {
+  font-family: "Courier New", Courier, monospace;
 }
 
 .transition {
   visibility: hidden;
   opacity: 0;
-  transition: visibility 0s, opacity 1.0s linear;
+  transition: visibility 0s, opacity 1s linear;
 }
 
 .navbar-toggler-icon {
-  background-image: url("./images/sprite_invader_ready.png")
+  background-image: url("./images/sprite_invader_ready.png");
 }
 
 .navbar-toggler {
   border-color: rgb(255, 255, 255);
-} 
+}
 
 hr {
   margin-top: 1rem;
@@ -49,38 +48,38 @@ hr {
 .alert-logs-namespace {
   background-color: #7116d8;
   color: #ffffff;
-  border-color: #FFF;
+  border-color: #fff;
   border-radius: 1px;
-  font-size: 14px; 
+  font-size: 14px;
   font-family: Courier New, Courier, monospace;
 }
 
 .alert-logs-pod {
   background-color: #7116d8;
   color: #ffffff;
-  border-color: #FFF;
+  border-color: #fff;
   border-radius: 1px;
-  font-size: 14px; 
+  font-size: 14px;
   font-family: Courier New, Courier, monospace;
 }
 
 .alert-logs-container {
   background-color: #7116d8;
   color: #ffffff;
-  border-color: #FFF;
+  border-color: #fff;
   border-radius: 1px;
-  font-size: 14px; 
+  font-size: 14px;
   font-family: Courier New, Courier, monospace;
 }
 
 .custom-btn-group {
   margin-top: 2%;
-  border: 5px solid #b2afaf;
+  border: 8px solid #b2afaf;
   border-radius: 5px;
   -moz-border-radius: 15px;
   -webkit-border-radius: 15px;
   padding: 5px;
-  border-image-slice: 5;    
+  border-image-slice: 5;
 }
 
 .logtail-group {
@@ -90,7 +89,7 @@ hr {
   -moz-border-radius: 15px;
   -webkit-border-radius: 15px;
   padding: 5px;
-  border-image-slice: 5;    
+  border-image-slice: 5;
 }
 
 .chaos-prog-area {
@@ -102,11 +101,15 @@ hr {
   border-image-slice: 5;
 }
 
-.btn-light  {
+.btn-light {
   border-color: #000000;
 }
 
-.btn-light:hover, .btn-light:focus, .btn-light:active, .btn-light.active, .open .dropdown-toggle.btn-default {
+.btn-light:hover,
+.btn-light:focus,
+.btn-light:active,
+.btn-light.active,
+.open .dropdown-toggle.btn-default {
   background-color: #b0b3b1;
   color: #000000;
   border-color: #000000;
@@ -129,14 +132,14 @@ hr {
 
 .log-row {
   color: #4fa80b;
-  font-size: 14px; 
+  font-size: 14px;
   font-family: Courier New, Courier, monospace;
   margin-top: 0.5%;
 }
 
 .log-title {
   color: #7c737f;
-  font-size: 12px; 
+  font-size: 12px;
 }
 
 .btn-green {
@@ -147,7 +150,7 @@ hr {
 
 @font-face {
   font-family: pixel;
-  src: url('./fonts/pixel.otf');
+  src: url("./fonts/pixel.otf");
   font-size-adjust: inherit;
 }
 
@@ -171,7 +174,11 @@ div {
   font-family: pixel;
 }
 
-.game-canvas { background: #161616 ; display: block; margin: 0 auto; }
+.game-canvas {
+  background: #161616;
+  display: block;
+  margin: 0 auto;
+}
 
 .http-stats-code-canvas {
   margin-top: 2%;
@@ -180,7 +187,7 @@ div {
   -moz-border-radius: 15px;
   -webkit-border-radius: 15px;
   padding: 5px;
-  border-image-slice: 5;    
+  border-image-slice: 5;
 }
 
 .td-grey {
@@ -208,6 +215,10 @@ div {
 }
 
 @keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
\ No newline at end of file
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}